Apilamiento y float

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

Apilamiento y float

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

  1. Fondo y bordes del elemento raiz
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
  3. Bloques flotantes
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

  1. Fondo y bordes del elemento raiz
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
  3. Bloques flotantes
  4. Descendientes en línea en el flujo normal
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)

Código fuente de ejemplo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stacking and float</title>
    <style type="text/css">

    div {
        font: 12px Arial;
    }

    span.bold { font-weight: bold; }

    #absdiv1 {
        opacity: 0.7;
        position: absolute;
        width: 150px;
        height: 200px;
        top: 10px;
        right: 140px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
        text-align: center;
    }

    #normdiv {
        /* opacity: 0.7; */
        height: 100px;
        border: 1px dashed #999966;
        background-color: #ffffcc;
        margin: 0px 10px 0px 10px;
        text-align: left;
    }

    #flodiv1 {
        opacity: 0.7;
        margin: 0px 10px 0px 20px;
        float: left;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
        text-align: center;
    }

    #flodiv2 {
        opacity: 0.7;
        margin: 0px 20px 0px 10px;
        float: right;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
        text-align: center;
    }

    #absdiv2 {
        opacity: 0.7;
        position: absolute;
        width: 150px;
        height: 100px;
        top: 130px;
        left: 100px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
        text-align: center;
    }

</style>
</head>

<body>
    <br /><br />

    <div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
    </div>

    <div id="flodiv1">
        <br /><span class="bold">DIV #2</span>
        <br />float: left;
    </div>

    <div id="flodiv2">
        <br /><span class="bold">DIV #3</span>
        <br />float: right;
    </div>

    <br />

    <div id="normdiv">
        <br /><span class="bold">DIV #4</span>
        <br />no positioning
    </div>

    <div id="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</body>
</html>

También puedes ver

Información del documento original

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javichito
 Última actualización por: javichito,