img div attribute html css css3 background overlap

div - title html css



¿Por qué el contenido no está cubierto por el fondo de un elemento adyacente cuando hay una superposición? (7)

Es importante tener en cuenta que para este caso, cada div tiene su altura debido a su contenido. Digamos por un momento que la altura resultante es de 20 px.

entonces, si dice que el primer div tendrá margen superior: 20px, el segundo div, que se declaró después del primero, comienza desde donde termina el primer div.

entonces, la posición inicial del segundo sería el margen superior del primero más la altura del primero. Digamos que da 40px.

entonces, la posición inicial del segundo sería 40px para este caso. cuando dices que el margen superior del segundo div es -15px, la posición inicial sería 40px-15px. por lo tanto, si desea que el segundo se superponga al primero, debe colocar el margen superior igual al negativo de la altura del primero.

Aquí está la situación:

body { margin: 0; background: pink; color: #fff; } .box { margin-top: 20px; background: red; } .bottom { text-align: right; background: green; animation: animate 2s infinite alternate linear; } @keyframes animate { from { margin-top: 10px; } to { margin-top: -40px; } }

<div class="box"> some content </div> <div class="bottom"> other content </div>

¿Qué esta pasando?

Como puede ver, tenemos dos div sin ningún estilo complejo (simplemente color de fondo). Estoy haciendo que el segundo div superponga al primero aplicando un margin-top negativo. Espero ver uno superpuesto completamente al otro, pero este no es el caso. El segundo div se desliza entre el contenido y el fondo del primero y es un comportamiento extraño para mí.

La animación no tiene nada que ver aquí, simplemente la uso para mostrar mejor el comportamiento. Simplemente podemos agregar margen negativo sin animación y tendremos lo mismo:

body { margin: 0; background: pink; color: #fff; } .box { margin-top: 20px; background: red; } .bottom { margin-top:-10px; text-align: right; background: green; }

<div class="box"> some content </div> <div class="bottom"> other content </div>

Entonces mi pregunta es: ¿por qué tal comportamiento?

Por cierto, todos sabemos que hay algunas cosas difíciles con CSS que no sospechamos cuando las enfrentamos por primera vez (como colapso de margen, propagación de fondo del cuerpo a html, problema de espacio en blanco, etc.) pero se explican claramente en alguna parte y espero encontrar un recurso oficial donde pueda entender claramente esto y no solo obtener algo como "Quizás esto suceda porque ..." , "Sospecho que esto está relacionado con ..." , "Creo tiene algo que ver con ... " , etc.


Mi opinión / explicación sobre esto

Supongo que el contenido como el texto es más importante que el fondo y otros estilos visuales, por lo que tal vez cuando se superponen colocamos todo el texto en la parte superior y todos los otros estilos en la parte inferior, decidimos el orden dentro de cada grupo y luego imprimimos el resultado.

Aquí hay un ejemplo más complejo:

body { margin: 0; background: pink; color: #fff; } div { font-size: 39px; line-height: 28px; margin-bottom: -20px; font-weight: bold; } body :nth-child(1) { background: red; border:3px solid brown; } body :nth-child(2) { background: blue; border:3px solid yellow; color: #000; } body :nth-child(3) { background: green; border:3px solid orange; }

<div> some content </div> <div> other content </div> <div> more content </div>

Podemos ver claramente que la pila visual es la siguiente (comenzando de abajo hacia arriba):

  • Estilo del primer div (fondo + borde)
  • Estilo del segundo div (fondo + borde)
  • Estilo del tercer div (fondo + borde)
  • contenido de texto del primer div
  • contenido de texto del segundo div
  • contenido de texto del tercer div

Aviso importante: antes de responder, tenga en cuenta que no estoy buscando una solución a esto o cómo evitarlo. Simplemente agregando position:relative el comportamiento position:relative desaparece y podemos jugar con z-index para decidir sobre el apilamiento. Estoy buscando entender por qué sucede tal cosa.

Lo que sucede es que tiene 2 ''cuadros'' superpuestos que deben representarse en la misma capa z, capa 0. Sin embargo, en Introducción al modelo de cuadro básico CSS , que explica el área del borde , dice que:

Cuando hay un fondo ( background-color o background-image ) establecido en una caja, se extiende hasta el borde exterior del borde (es decir, se extiende debajo del borde en orden z).

Supongo que el borde y el contenido están en "primer plano".

Entonces, la especificación de dibujar todos los cuadros en la misma capa, combinada con la especificación de dibujar el fondo debajo del primer plano, supongo que resulta en dibujar todos los fondos debajo de todos los primeros planos.

Dentro de cada ''subcapa'', la superposición se realiza según el orden HTML.

Para entender por qué los DIV en la publicación están en la misma capa, uno debe leer El contexto de apilamiento .

Para "entender" por qué el fondo pasa por debajo del primer plano, uno debe leer Introducción al modelo de cuadro básico de CSS .

ADVERTENCIA: Leer la siguiente información puede afectar su salud mental.

El orden de pintura para los descendientes de un elemento que genera un contexto de apilamiento (vea la propiedad del índice z) es:

  1. Si el elemento es un elemento raíz:
    1. color de fondo del elemento sobre todo el lienzo.
    2. imagen de fondo del elemento, sobre todo el lienzo, anclado en el origen que se usaría si se pintara para el elemento raíz.
  2. Si el elemento es
    • un bloque, elemento de lista u otro equivalente de bloque:
      1. color de fondo del elemento a menos que sea el elemento raíz.
      2. imagen de fondo del elemento a menos que sea el elemento raíz.
      3. regla de columna del elemento.
      4. borde del elemento
    • De lo contrario, si el elemento es una tabla de nivel de bloque:
      1. fondos de tabla (color y luego imagen) a menos que sea el elemento raíz.
      2. fondos del grupo de columnas (color y luego imagen).
      3. fondos de columna (color y luego imagen).
      4. fondos de grupo de filas (color y luego imagen).
      5. fondos de fila (color y luego imagen).
      6. fondos de celda (color y luego imagen).
      7. regla de columna de celda para varias columnas.
      8. todos los bordes de la tabla (en orden de árbol para bordes separados).
  3. Contextos de apilamiento formados por descendientes posicionados con índices z negativos (excluyendo 0) en orden de índice z (el más negativo primero) luego en orden de árbol.
  4. Para todos sus descendientes en flujo, no posicionados, a nivel de bloque en orden de árbol:
    • Si el elemento es un bloque, elemento de lista u otro equivalente de bloque:
      1. color de fondo del elemento
      2. Imagen de fondo del elemento.
      3. regla de columna del elemento.
      4. borde del elemento
    • De lo contrario, el elemento es una tabla:
      1. fondos de la mesa (color y luego imagen).
      2. fondos del grupo de columnas (color y luego imagen).
      3. fondos de columna (color y luego imagen).
      4. fondos de grupo de filas (color y luego imagen).
      5. fondos de fila (color y luego imagen).
      6. fondos de celda (color y luego imagen).
      7. regla de columna de celda (varias columnas).
      8. todos los bordes de la tabla (en orden de árbol para bordes separados).
  5. Todos los descendientes flotantes no posicionados, en orden de árbol. Para cada uno de estos, trate el elemento como si creara un nuevo contexto de apilamiento, pero cualquier descendiente posicionado y descendientes que realmente creen un nuevo contexto de apilamiento se consideran parte del contexto de apilamiento primario, no este nuevo.
  6. Si el elemento es un elemento en línea que genera un contexto de apilamiento, entonces:
    1. Para cada cuadro de línea en el que se encuentra el elemento:
      1. Vaya a 7.2.1 para los cuadros del elemento en ese cuadro de línea (en orden de árbol).

  7. De lo contrario: primero para el elemento, luego para todos sus descendientes en flujo, no posicionados, a nivel de bloque en orden de árbol:

    1. Si el elemento es un elemento reemplazado a nivel de bloque, entonces: el contenido reemplazado, atómicamente.

    2. De lo contrario, para cada cuadro de línea de ese elemento:

      1. Para cada cuadro que es hijo de ese elemento, en ese cuadro de línea, en orden de árbol:

        1. color de fondo del elemento
        2. Imagen de fondo del elemento.
        3. regla de columna del elemento.
        4. borde del elemento
        5. Para elementos en línea:
          1. Para todos los elementos en flujo, no posicionados, en línea de nivel secundario que están en este cuadro de línea, y todas las ejecuciones de texto dentro del elemento que está en este cuadro de línea, en orden de árbol:
            1. Si se trata de una ejecución de texto, entonces:
              1. cualquier subrayado que afecte el texto del elemento, en el orden de árbol de los elementos que aplican el subrayado (de modo que el subrayado del elemento más profundo, si lo hay, se pinta en la parte superior y el subrayado del elemento raíz, si lo hay, se dibuja en la parte inferior).
              2. cualquier sobrelínea que afecte el texto del elemento, en el orden de árbol de los elementos que aplican la sobrelínea (de modo que la sobrelínea del elemento más profundo, si la hay, se pinta en la parte superior y la sobrelínea del elemento raíz, si la hay, se dibuja en la parte inferior)
              3. el texto
              4. cualquier línea que afecte el texto del elemento, en el orden de árbol de los elementos que aplican la línea (de modo que la línea de fondo del elemento más profundo, si la hay, está pintada en la parte superior y la línea de línea del elemento raíz, si la hay, es dibujado más abajo).
            2. De lo contrario, salte a 7.2.1 para ese elemento
        6. Para elementos inline-block e inline-table:
          1. Para cada uno de estos, trate el elemento como si creara un nuevo contexto de apilamiento, pero cualquier descendiente posicionado y descendientes que realmente creen un nuevo contexto de apilamiento se consideran parte del contexto de apilamiento primario, no este nuevo.
        7. Para elementos reemplazados a nivel en línea:
          1. El contenido reemplazado, atómicamente.
        8. Opcionalmente, el contorno del elemento (ver 10 a continuación).

        Tenga en cuenta que algunos de los cuadros pueden haberse generado por división de línea o el algoritmo bidireccional Unicode.

    3. Opcionalmente, si el elemento está a nivel de bloque, el contorno del elemento (ver 10 más abajo).

  8. Todos los descendientes posicionados, opacidad o transformados, en orden de árbol que se dividen en las siguientes categorías:

    1. Todos los descendientes posicionados con ''z-index: auto'' o ''z-index: 0'', en orden de árbol. Para aquellos con ''z-index: auto'', trate el elemento como si creara un nuevo contexto de apilamiento, pero cualquier descendiente posicionado y descendiente que realmente cree un nuevo contexto de apilamiento debe considerarse parte del contexto de apilamiento primario, no este nuevo . Para aquellos con ''z-index: 0'' trata el contexto de apilamiento generado atómicamente.

    2. Todos los descendientes de opacidad con opacidad inferior a 1, en orden de árbol, crean un contexto de apilamiento generado atómicamente.

    3. Todos los descendientes de transformación con transformación distinta de ninguna, en orden de árbol, crean un contexto de apilamiento generado atómicamente.
  9. Contextos de apilamiento formados por descendientes posicionados con índices z mayores o iguales a 1 en orden de índice z (el más pequeño primero) y luego en orden de árbol.

Ahora en serio, consulte la documentación del pedido de pintura w3c

En el punto 4.1, se pinta el fondo de los niños.

En el punto 4.4, se pinta el borde de los niños.

Cuando finalice el punto 4, se pintará todo el fondo y el borde de su fragmento

Ahora, en el punto 7.2.1.5.1.1.3, se pinta el texto de los niños.

Este es el comportamiento que estás viendo.

Observe también que es fácil cambiar este comportamiento. Podemos activar el punto 8.2 (configuración de opacidad) y se pintará como podría haber esperado:

body { margin: 0; background: pink; color: #fff; } .box { margin-top: 20px; background: red; } .bottom { text-align: right; background: green; animation: animate 2s infinite alternate linear; opacity: 0.9999; } @keyframes animate { from { margin-top: 10px; } to { margin-top: -40px; } }

<div class="box"> some content </div> <div class="bottom"> other content </div>

Otro fragmento, que muestra varios puntos en el documento:

Observe que todo el borde y el fondo en el paso 4 se representan después del paso 3, y antes de setp 5. Pero el texto en el paso 4 es el paso 7, por lo que se representa después del texto en el paso 5

div { width: 200px; height: 100px; border: solid 10px; font-size: 40px; } .step3 { border-color: red; background-color: lightpink; z-index: -1; position: relative; margin-left: 10px; } .step41 { border-color: brown; background-color: yellow; margin-left: 30px; margin-top: -40px; } .step42 { border-color: blue; background-color: lightblue; margin-left: 50px; margin-top: -40px; color: red; } .step43 { border-color: green; background-color: lightgreen; margin-left: 160px; margin-top: -150px; color: crimson; } .step5 { float: left; background-color: white; margin-top: -30px; } div:hover { position: relative; }

<div class="step3">Step 3 negative zindex</div> <div class="step41">step4 In flow, number 1</div> <div class="step42">In flow, number 2</div> <div class="step43">In flow, number 3</div> <div class="step5">step 5 float</div>

No sé si esto cuenta como un caso de uso: esto es más natural el comportamiento inicial que el establecido por los elementos de posicionamiento relativo

div { width: 100px; height: 1.3em; border: solid 12px tomato; font-size: 18px; } div:hover { position: relative; }

<div>a long stretch of text overflowing to the other div</div> <div></div>

Esto se debe a la jerarquía ... Trataré de explicarlo un poco más ...

body { margin: 0; background: pink; color: #fff; } .box { margin-top: 20px; background: red; } .bottom { margin-top:-10px; text-align: right; background: green; }

<div class="box"> some content </div> <div class="bottom"> other content </div>

Como en este ejemplo, nuestra jerarquía se ve así:

.box .box content .bottom .bottom content

Entonces, en este momento, si no pasa la position: relative por ejemplo, usará la jerarquía normal de HTML sin verificar divs ...

Tiene implementado el fondo en .box y .bottom , por lo que en este caso cuando agrega margin-top a .bottom , entonces:

  • .bottom y .box tienen la misma posición de jerarquía horizontal, pero .bottom tiene una vertical más grande, por lo que se superpondrá .box fondo de .box
  • .bottom content y el .bottom content .box content tienen una posición más grande que .bottom y .box por lo que se superpondrán a cada uno de ellos
  • .bottom content se superpondrá .box content debido a una mayor jerarquía vertical

La respuesta a la pregunta no está cerca de todo el mundo está cavando. Porque todos hemos arreglado nuestra mente al creer que esto es algo que aprovecha la experiencia del usuario de todos modos, algo intuitivo. ¿Alguien ha pensado que esto puede ser para cualquier beneficio de procesamiento de CPU?

El motor de renderizado del navegador no pinta un elemento por completo, y luego sigue pintando el siguiente, porque tenemos tecnología GPU. El motor de renderizado pinta elementos en diferentes capas apiladas una sobre otra que se entregan a la GPU que luego rasteriza todas las capas en una capa compuesta que aparece en la pantalla.

Entonces, ¿cómo se crean las capas?

  • El motor de representación pinta todos los fondos y bordes en la capa base.
  • Crea una nueva capa para un elemento que tiene un posicionamiento especificado. La capa se apila sobre la capa base para que la GPU la rasterice. Cuando el elemento se mueve, el motor de renderizado solo le dice a la GPU que mueva la capa, la GPU hace el resto. La CPU se guarda de la pintura de arriba.
  • Crea una nueva capa para un elemento que tiene especificada la opacidad. Cuando la opacidad cambia, la GPU hace el trabajo de rasterización.
  • Del mismo modo, crea una nueva capa para entradas, botones, lienzos, videos, todo lo que puede hacer que la CPU pinte repetidamente, se transfiere a la GPU como una nueva capa. Estamos ahorrando mucho procesamiento de CPU, ¿verdad? :)
  • Niega la creación de una nueva capa para un elemento con margen negativo :(. Esto es obvio que el navegador no puede emitir una nueva capa para cada elemento con margen, hay muchas. Incluso si tiene un margen negativo, puede superponerse o no a otro elemento. La única manera de estar seguro es mirar en el árbol de renderizado. ¿Cuál es el punto? Estamos tratando de guardar el procesamiento, buscando en el árbol de renderizado cada elemento lo arruinará.
  • Emite una nueva capa para el elemento de texto. La GPU puede rasterizar el texto de manera mucho más eficiente en un fondo, entonces, ¿por qué pintarlo con CPU en la capa base? Esta fue la pregunta original. Creo que todos pueden responderlo ahora.

¿Por qué el texto se pinta en una capa separada sobre la capa base?

  • La CPU no necesita pintar el texto sobre el fondo, la CPU está contenta.
  • Cuando el color del texto o las sombras cambian, la CPU solo pinta la capa de texto, la GPU la rasteriza en el fondo.
  • Cuando el fondo cambia, la CPU solo pinta la capa de fondo, la GPU rasteriza el texto sobre ella.
  • Cuando el texto se desplaza sobre un fondo fijo, no se necesita pintar, la CPU solo le dice a la GPU que mueva la capa de texto, la GPU hace el resto.
  • Y mucho más...

Ahora echemos un vistazo a la magia que estamos encontrando debido a esto.

  • Caso 1: cuando la posición relativa se agrega a la segunda división, obtiene una nueva capa, esta nueva capa se apila sobre la capa base e incluso sobre la capa de texto de la primera división.
  • Caso 2: Lo mismo sucede cuando se aplica la opacidad.
  • Caso 3: cualquier estilo de transformación creará una nueva capa.
  • Caso 4: Este es interesante. El margen no crea ninguna capa para el segundo div, se pinta en el div base después de pintar el primer div, por lo que se pinta sobre el primer div en la misma capa. El texto en el primer div está en su propia capa que se apila sobre la capa base para que la GPU rasterice el texto sobre el fondo del segundo div.

[fuente: developers.google.com ]

La respuesta de @vals resaltada donde se explica este comportamiento en la especificación PERO proporcionó solo el 80% de la respuesta ya que todavía estoy buscando el por qué. . Dado que este comportamiento es de alguna manera contra-intuitivo, traté de encontrar casos de uso reales en los que este comportamiento debería ser así y no como esperaba.

Después de hacer muchas búsquedas, terminé con la conclusión lógica de que un buen desarrollador web debería estar al tanto de cualquier cosa especificada dentro de la especificación y no debería dejar lugar a un comportamiento aleatorio / inesperado, especialmente cuando se trata de un comportamiento bien explicado por la especificación y no los específicos del navegador .

Así que escribimos código, nos enfrentamos a cosas extrañas , aprendemos sobre ellos, ajustamos nuestro código ... hacemos esto hasta que tengamos algo funcionando como se esperaba.

Dado que un desarrollador web tiene un control total sobre su desarrollo, me preguntaba si hay alguna herramienta externa que pueda afectar su CSS y la representación de su página web que no puede controlar.

Sí, y uno de ellos está relacionado con la accesibilidad . No estoy hablando de las pautas que debe seguir un desarrollador web, sino de algún widget en algún sitio web que le permite aumentar el tamaño de fuente, cambiar el contraste, etc. para ayudarlo a leer mejor contenido. Este tipo de widget se puede integrar en cualquier lugar mediante complementos.

Aquí hay un ejemplo simplificado en el que un usuario puede aumentar el tamaño de fuente y donde el comportamiento anterior es útil, ya que mantendrá el contenido del texto anterior para que podamos leerlo fácilmente:

$(''button'').click(function() { $(''body'').css(''font-size'',''22px''); })

body { font-size:14px; max-width:500px; } section { height: 80px; background: red; padding:5px; border-top: 40px solid blue; color:#fff; } div { height:80px; background:url(https://lorempixel.com/g/400/400/) center/cover; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Make font bigger</button> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus posuere dolor vel faucibus. Proin augue orci, tempor cursus erat aliquet, pellentesque suscipit odio. Sed eleifend diam in justo vehicula feugiat. In pretium, elit eu dapibus efficitur, </section> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus posuere dolor vel faucibus. Proin augue orci, tempor cursus erat aliquet, pellentesque suscipit odio. Sed eleifend diam in justo vehicula feugiat. In pretium, elit eu dapibus efficitur, </section> <div> </div>

En este código, el desarrollador usó un tamaño de fuente igual a 14px que puede ser difícil de leer para algunas personas, por lo que es lógico que queramos aumentarlo. Si lo hacemos, tendremos un comportamiento extraño PERO si no fuera así, el contenido estará oculto y, por lo tanto, ¡no podremos leerlo más!

Esta situación da una buena razón para tal decisión y, como dije en la pregunta: el contenido es más importante que el estilo detrás en este caso, especialmente cuando se trata de herramientas externas que cambian el comportamiento inicial.

La intención de aumentar el tamaño de la fuente aquí es resaltar el contenido y no el fondo o el borde, lo que confirma que el orden de la pintura debe ser así para cumplir con este requisito.

Una forma de hacer la pregunta sería: ¿podría manejarse de manera diferente y aún administrar las diferentes características requeridas por CSS, especialmente la propiedad flotante?

Lo que dice la especificación es que para un contexto de apilamiento (básicamente el bloque superior de una parte del árbol DOM que está posicionado), pinta los elementos en ese orden:

  1. Fondo del elemento superior del contexto de apilamiento
  2. elementos con índice z negativo

Hasta ahora tiene sentido, entonces tienes

  1. todos los fondos y bordes de todos los elementos de nivel de bloque (básicamente elementos que se muestran: bloque pero no posicionado) en el árbol debajo del elemento superior.
  2. entonces todos los elementos flotantes de todo el árbol debajo del elemento superior.
  3. Este paso es otro del paso 2, por lo que realmente no interfiere con este caso específico.
  4. Luego, todos los elementos en flujo (o elementos no flotantes) de todo el árbol debajo del elemento superior (no son solo los textos que se representan en 7, son todos elementos en línea. Si sus elementos en línea tienen un fondo, enmascarará lo que está detrás )

El "problema" con esto es que los elementos en flujo no se representan en el orden del árbol. El fondo de un elemento más bajo en el árbol se puede representar antes de un elemento en flujo superior en el árbol. Lo que está implícito en la pregunta es que esperamos algo más como:

  1. renderiza todos los fondos y elementos de borde y flujo de todos los elementos de nivel de bloque en orden de árbol.

Eso generaría los elementos de una manera más intuitiva. Entonces, ¿por qué entonces separar los elementos en flujo del resto? ¿Por qué es el paso 5 antes del paso 7? Está claro que si lo haces así, entonces tienes un problema con tus elementos flotantes. Deben colocarse antes del resto del flujo, porque eso es lo que son, elementos que se sacan del flujo. Entonces, el paso 5 tiene sentido, debe considerar los elementos flotantes antes que los elementos no flotantes.

Entonces, ¿qué pasa si se representaron en el paso 4, así:

  1. todos los fondos y bordes, luego elementos flotantes y luego no flotantes de todos los elementos de nivel de bloque en orden de árbol.

Todavía tiene un problema, debido a lo que se espera de los elementos flotantes. Ver este fragmento:

body { margin: 0; background: pink; color: #fff; } .box { margin-top: 20px; background: red; } .bottom { margin-top:-10px; text-align: left; background: green; }

<div class="box"> <span>some content some content some content some content some content some content some content some content some content some content</span> <span style="float: left; background: navy"> floated content box<br> floated content box<br> floated content box<br> floated content box </span> </div> <div class="bottom"> <span style="background-color:turquoise;">other content</span> <span style="float: left; background-color:bisque;"> floated content bottom<br> floated content bottom<br> floated content bottom </span> </div>

Verá que los elementos flotantes no tienen ningún impacto en la altura de los elementos de bloque, lo que se espera, de lo contrario el resultado sería extraño, en absoluto lo que se espera de un elemento flotante. Entonces, si el elemento flotante en el bloque superior se renderizó antes que el fondo del elemento inferior, entonces el fondo estaría sobre el elemento flotante. Por lo tanto, renderizar fondos, luego flotar, luego en flujo en el orden del árbol tampoco funciona. Debe colocar todos los elementos flotantes de todo el árbol antes de llegar al flujo normal.

Por lo tanto, está bastante atascado con esta forma de manejar el renderizado, lo que significa que debe verificar todos sus elementos en un contexto para colocar elementos flotantes, luego colocar el resto del flujo normal. Tiene este extraño efecto secundario, pero teniendo en cuenta la complejidad del diferente posicionamiento esperado por las especificaciones CSS, no estoy seguro de que haya otra forma de hacerlo.

EDITAR:

Creo que este comportamiento está claramente especificado en las especificaciones, ver aquí: https://www.w3.org/TR/CSS2/visuren.html#floats

El contenido de los flotadores se apila como si los flotadores generaran nuevos contextos de apilamiento, excepto que los elementos posicionados y los elementos que realmente crean nuevos contextos de apilamiento participan en el contexto de apilamiento primario del flotador. Un flotador puede superponerse a otros cuadros en el flujo normal (por ejemplo, cuando un cuadro de flujo normal al lado de un flotador tiene márgenes negativos). Cuando esto sucede, los flotadores se representan delante de los bloques de flujo no posicionados, pero detrás de las líneas de flujo de flujo.

Lo que significa exactamente lo que he ilustrado, lo que significa que se espera que el elemento flotante se superponga a los bloques de flujo y se represente frente a dichos fondos.