Cómo posición absoluta dentro de un div?

Question

Estoy teniendo un problema extraño posicionamiento de un conjunto de divs dentro de otro div. Creo que va a ser mejor para describirlo con una imagen:

Dentro de la negro (#box) div hay dos divs (.a, .b) que tienen que posicionado en el mismo lugar. Lo que estoy tratando de lograr es la foto en la primera imagen, segundo es el efecto que consigo. Parece que si los divs se hicieron flotar sin compensación o algo, lo que obviamente no es el caso. Cualquier idea sería bienvenido!

Este es el código para esta muestra:

CSS:

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML:

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>

Answer 1

Los divs absolutos se sacan del flujo del documento así que el div que contiene no tiene ningún contenido excepto por el relleno. #Box dar una altura de llenarlo.

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

Answer 2

1. En primer lugar todos los elementos de bloque se postioned estática al 'documento'. El posicionamiento predeterminado para todos los elementos es position: static, que significa que el elemento no se coloca y se produce donde se haría normalmente en el documento. Normalmente no se especificaría esto a menos que se necesitaba para anular un posicionamiento que se había establecido previamente.
2. Posición relativa:. Si especifica position: relative, a continuación, puede utilizar la parte superior o inferior, y hacia la izquierda o derecha para mover el elemento relativo a donde normalmente se producen en el documento
3. Cuando se especifica position: absolute, el elemento se elimina del documento y coloca exactamente donde van a decir que ir.

Así que en lo que se refiere a su pregunta que debe posicionar el bloque que contiene relativa, es decir:

#parent {
  position: relative;
}

Y el elemento secundario que debe posicionar absoluta al elemento padre como esto:

#child {
  position: absolute;
}

---

Ver: Aprender Posicionamiento CSS en diez pasos

Answer 3

El problema se describe (entre otros) en este artículo .

#box es relativamente posicionada, lo que hace parte del "flujo" de la página. Sus otros divs están posicionados absolutamente, por lo que se eliminan de la página de "flujo".

significa flujo de la página que la colocación de un elemento efectos de otros elementos en el flujo.

En otras palabras, como #box ahora ve el DOM, y .a .b ya no son #box "dentro".

Para solucionar este problema, que se quiere que todo sea relativa o absoluta de todo.

Una forma sería:

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

Answer 4

Uno de #a o #b necesita para no ser position:absolute, de manera que #box crecerá para acomodarlo.

Por lo que puede dejar de #a de ser position:absolute, y todavía posicionar #b sobre la parte superior de la misma, así:

 #box {
        background-color: #000;
        position: relative;     
        padding: 10px;
        width: 220px;
    }
    
    .a {
        width: 210px;
        background-color: #fff;
        padding: 5px;
    }
    
    .b {
        width: 100px; /* So you can see the other one */
        position: absolute;
        top: 10px; left: 10px;
        background-color: red;
        padding: 5px;
    }
    
    #after {
        background-color: yellow;
        padding: 10px;
        width: 220px;
    }

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>
    <div id="after">Hello world</div>

(Tenga en cuenta que he hecho las anchuras diferentes, por lo que se puede ver una detrás de la otra.)

Editar después del comentario de Justine: A continuación, su única opción es especificar la altura de #box. Este:

#box {
    /* ... */
    height: 30px;
}

funciona perfectamente, suponiendo que las alturas de A y B son fijos. Tenga en cuenta que tendrá que poner en el modo IE estándares mediante la adición de un tipo de documento en la parte superior de su HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

antes de que funciona correctamente.