Divisiones superpuestas sin posición absoluta

Lo que sigue es una explicación larga, pero es la única manera de comunicar de manera efectiva el problema que trato de resolver …

Estoy (algo desesperadamente, y completamente sin éxito) tratando de superponer divs sin el uso del posicionamiento absoluto. La necesidad proviene de un carrito de PayPal que coloco en el sitio a través de un Javascript. La posición natural del carro es dura contra el margen superior de la página web (no su div, que es #wpPayPal , o el contenedor para este div, #main ).

El autor del guión recomienda encarecidamente no personalizar la hoja de estilo del carrito, pero encontré un tutorial que escribió que permite la inserción del carro en un separador de posición, con instrucciones de posicionamiento para el contenedor que funciona. Pude colocar el carrito debajo del banner principal del sitio. sección. Sin embargo…

El formulario HTML del carrito y un elemento ul dentro de cada uno tienen requisitos de altura en la hoja de estilo del carrito, y esto empuja el contenido principal de la página, envuelto por el contenedor div #imageWrapper , demasiado abajo en la página para que sea aceptable.

Intenté posicionar #imageWrapper sobre #main con varias ideas recostackdas de publicaciones en este sitio sin éxito. He intentado el posicionamiento absoluto en #imageWrapper, pero esto libera el pie de página para flotar debajo. # La altura de imageWrapper es variable, por lo tanto, no quiero mantener el pie de página en su lugar con la altura, ya que la altura mínima para evitar la superposición empujaría demasiado el pie de página para gran parte del contenido del sitio.

También intenté tirar de la posición: relativo del CSS del formulario del carrito, pero el carro inmediatamente flota de nuevo a la parte superior de la página web. Margen, margen superior, etc., no solucionan esto.

Luego leí un artículo sobre cómo usar la posición: relative y z-index para superponer divs. Intenté esto también, primero poniendo z-index: -1 en #main (el div que envuelve el carro de paypal), pero el carro desaparece. No estoy seguro de dónde va, ya que la navegación de ruta del sitio, también envuelta por #main, se mantuvo.

Luego configuré el índice z para main en 0 y posición aplicada: relativo a #imageWrapper con z-index: 100. El carrito reapareció pero todavía contiene #imageWrapper.

Las sugerencias son bienvenidas. No soy una persona de interfaz por ningún lado de la imaginación, solo un tipo que sabe cómo usar Google, así que gracias de antemano por articular claramente su resolución 🙂 Además, digo, actualmente tengo el requisito de min-altura para el carro form set a 0 y configure el elemento UL dentro de height: auto. Con solo un elemento en el carro, esto permite que #imageWrapper suba la página lo suficiente como para ser aceptable, pero esta no es una solución viable a largo plazo.

Aquí hay una página de ejemplo : para ver el carro, agregue un artículo usando el menú desplegable que aparece debajo de la imagen principal. En su estado expandido, verá cómo #imageWrapper se sienta contra él.

He incluido partes del HTML / CSS ofensivo a continuación:

~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~

etc …

 #main { display: inline; position: relative; z-index: 0; } #imageWrapper { clear: both; width: 840px; margin: 0 auto; padding: 0; position: relative; z-index: 100; } #imageInnerWrapper { width: 840px; margin: 0 auto; padding: 0; position: relative; z-index: 100; } #featureImage { width: 840px; margin: 0 auto; padding: 0; } #wpPayPal { overflow: hidden; float: right; margin-right: 100px; min-width: 365px; min-height: 20px; } /* Override the default Mini Cart styles */ #wpBody #PPMiniCart form { position: relative; right: auto; width: auto; min-height: 0; } #wpBody #PPMiniCart form ul { height: auto; } 

Fiddle simple: solo CSS

Un tipo publicó otro pero tenía un montón de código extra innecesario y algo de JS. Otra publicación tenía la respuesta, pero le faltaba algo.

 .over { background: rgba(230, 6, 6, .5); float: right; height: 460px; margin-top: -500px; margin-right: 159px; overflow: visible; position: relative; width: 560px; color: #FFFFFF; /* Just for looks*/ z-index: 1000; padding: 20px/* Just for looks*/ } .over span { position: relative; /* Just for looks*/ top: 15px; /* Just for looks*/ } .this { width: 560px; height: 460px; color: #FFFFFF; /* Just for looks*/ padding: 20px; /* Just for looks*/ background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dtwigticchipmunk.jpg"); /* Just for looks*/ } 
 
To BE UNDER
..or not To BE UNDER

¡¡¡Lo tengo!!! :RE

La solución Pure Css es muy fácil. Pon lo siguiente.

 #main { float: right; overflow: visible; position: relative; z-index: 1000; height: 177px; width: 100%; } 

Reemplace lo que tenga en css #main con lo que he hecho anteriormente .

Por lo tanto, elimine lo siguiente:

 display: inline; position: relative; z-index: 0; 

Explicación: La idea principal aquí es flotar el elemento principal, hacerlo de cierta altura, por lo que en ningún punto empuja todo hacia abajo. Pero haz que el desbordamiento sea visible . El desbordamiento de contenido no afecta a los hermanos del elemento principal .

Ninguna de las respuestas anteriores realmente ayuda con su requerimiento, que es permitir que PPMiniCart expanda y contraiga sin presionar imageWrapper .

El truco aquí es darle a wpPayPal una altura fija lo suficientemente grande como para contener la versión contratada de PPMiniCart (40px lo hará; esto le dará al carrito de compras suficiente espacio, sin empujar demasiado el imageWrapper ).

 #wpPayPal { height:40px; } 

Luego, déle a main (el contenedor que contiene wpPayPal ) un z-index mayor que el de imageWrapper para que se desborde sobre él.

 #main { z-index: 1; } #imageWrapper { z-index: 0; } 

Al configurar imageWrapper z-index en 100 se exagera, recomendaría 0 como lo hice anteriormente.

También necesita algo de JavasScript para establecer el overflow: visible en wpPayPal después de que PPMiniCart expanda y elimine antes de que se contraiga. Afortunadamente, Mini Cart JS expone una agradable API impulsada por eventos que permite devoluciones de llamadas personalizadas. Como está utilizando jQuery en su página web, aprovechemos eso:

 PAYPAL.apps.MiniCart.render({ parent: 'wpPayPal', events: { afterShow: function () { $("#wpPayPal").css("overflow", "visible"); }, onHide: function () { $("#wpPayPal").css("overflow", ""); } } }); 

Tenga en cuenta la elección cuidadosa de las devoluciones de llamada afterShow y onHide , si intenta hacerlo de otra manera ( overflow: visible configuración overflow: visible antes de que PPMiniCart expanda o elimine antes de que PPMiniCart contraiga) PPMiniCart “flotará” durante la transición.


Finalmente, un violín de trabajo vale más que mil palabras.

Resolvió una solución elegante para su problema sin posicionamiento absoluto O flota usando flexbox – la principal ventaja es que ambas alturas div se respetan cuando se calcula la altura de los padres. Muy útil para superponer texto en una imagen:

 body { font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { max-width: 500px; /*border: 1px solid lime;*/ } .card { display: flex; /*border: 1px solid red;*/ overflow: hidden; } .box { position: relative; min-width: 100%; width: 100%; flex-basis: 100%; flex-grow: 1; } .box--image { z-index: 1; overflow: hidden; } .box--image.box--heightrestricted { max-height: 300px; } .box--text { z-index: 2; margin-left: -100%; display: flex; flex-direction: column; justify-content: flex-end; color: red; } .box--text h3 { margin: 0; padding: 1rem; } 
 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.

El fondo Div para un bloque con una altura dinámica se puede implementar usando flexbox sin un posicionamiento absoluto:

 /* Every rule not marked by "required" is optional and used only to decorate the example */ .block { margin: 10px 50px; display: flex; /* required */ flex-flow: row nowrap; /* required */ } .block .background, .block .foreground { box-sizing: border-box; /* required */ width: 100%; /* required */ flex: none; /* required */ } .block .background { background: #9ff; color: #fff; padding: 15px; font-size: 30px; } .block .foreground { padding: 15px; border: solid 1px; margin-left: -100%; /* required */ } .block .foreground .outside { position: absolute; top: 5px; left: 8px; } 
 
Background
Outside
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.

También puede usar flexbox para crear un contenedor de tabs sin posición absoluta:

 /* Flex Overflow */ section { display: flex; width: 100%; overflow: hidden; } section article { flex: 100% 0 0; order: 0; } section article:target { order: -1; } /* UI */ section { background-color: #ecf0f1; } section article { display: flex; align-items: center; justify-content: center; color: #ecf0f1; font-size: 20px; min-height: 8em; visibility: hidden; opacity: 0; transition: visibility .5s ease, opacity .5s ease; } section article:first-child, section article:target { visibility: visible; opacity: 1; } section article#zoneA { background-color: #2980b9; } section article#zoneB { background-color: #16a085; } section article#zoneC { background-color: #f39c12; } section article#zoneD { background-color: #8e44ad; } 
  
A
B
C
D

ahora puede hacer esto con la cuadrícula también.

 .parent { display: grid; grid-template-columns: 1fr; } .parent div { padding: 50px; background-color: rgba(0,0,0,0.5); grid-row-start: 1; grid-column-start: 1; } 
 
1
2