Posicionamiento absoluto dentro de la posición absoluta


89

Tengo 3 divelementos.

El primero dives más grande (envoltura) y tieneposition:relative;

El segundo divse posiciona de forma absoluta al primer divposicionamiento relativo (y se incluye en el primero div)

El tercero divestá contenido en el segundo divy también tiene posicionamiento absoluto.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

¿Por qué la 3ª divposición es absoluta a la 2ª div(que también es la posición absoluta a la 1ª div) y no a la 1ª divque tiene posición relativa?

Porque el tercero dives el posicionamiento absoluto al segundo posicionado absoluto div.


Eso es realmente algo que estoy buscando y estas respuestas a sus preguntas hicieron que mis ojos se abrieran: \.
Benjamin

absoluto: el elemento se posiciona en relación con su primer elemento ancestro posicionado (no estático)
Oswaldo Zapata

Respuestas:


94

Porque position: absoluterestablece la posición relativa para los niños al igual que lo position: relativehace.

No hay forma de evitar esto: si desea que el tercero divesté absolutamente posicionado con respecto al primero, tendrá que convertirlo en un hijo del primero.


Entonces, ¿básicamente la posición absoluta se convierte en posición relativa para su niño posicionado absoluto?
pufos

@pufos tipo de. La 0px / 0pxposición para los niños se restablece por elposition: absolute
Pekka

24
@pufos Creo que estás confundiendo esto un poco. position:relativesignifica que el elemento se posicionará (usando top, right, bottom left) relativamente desde su posición actual. position: absolutesignifica que se colocará en relación con la ventana del navegador o el primer padre con position: absoluteo position: relative.
seler

¿Puede compartir una referencia a esto en línea? Porque no pude encontrar ninguno ... Y ... Muchas gracias
pufos

2
@pufos, la referencia muy básica está aquí: w3.org/TR/CSS2/visuren.html#choose-position
Pekka

27

Ambos position:relativey position:absoluteestablecen elementos contenedores como ascesores de posicionamiento.

Si necesita que div 3 se coloque en función de div 1, conviértalo en un hijo directo de div 1.

Tenga en cuenta que position: relativesignifica que el elemento está posicionado en relación con su posición natural y position: absolutesignifica que el elemento está posicionado en relación con su primero position:relativeo position:absoluteantepasado .


Quería que el tercer div estuviera en una posición absoluta con respecto al div posicionado absoluto, pero no sabía si esto era estándar (navegador cruzado) ... y no pude encontrar especificaciones en línea ... Muchas gracias
pufos

Posicionamiento absoluto en esa sección: w3.org/TR/CSS21/visuren.html#comp-abspos
Mike Tunnicliffe

@MikeTunnicliffe absoluto significa que el elemento está posicionado en relación con su primera posición: fijo también
Trần Kim Dự

15

Posición estática: la posición estática es la forma predeterminada en que aparecerá un elemento en el flujo normal de su archivo HTML si no se especifica ninguna posición.

Importante: top, right, bottomy leftpropiedades no tienen efecto sobre A posición estática ELEMENT.

Posición relativa: posicionar un elemento con el valor relativo mantiene el elemento (y el espacio que ocupa) en el flujo normal de su archivo HTML.

A continuación, puede mover el elemento en alguna cantidad usando las propiedades left, right, topy bottom. Sin embargo, esto puede hacer que el elemento se superponga a otros elementos que están en la página, lo que puede ser el efecto que desea o no.

Un elemento relativamente posicionado puede moverse de su lugar, pero el espacio que ocupaba permanece.

Posición absoluta: la aplicación del valor de posición absoluta a un elemento lo quita del flujo normal. Cuando mueve el elemento posicionado absoluto, su punto de referencia es la parte superior / izquierda del elemento contenedor más cercano que tiene una posición declarada distinta de estática, también llamado contexto de posicionamiento más cercano. Por lo tanto, si no existe ningún elemento contenedor con una posición que no sea estática, se colocará desde la esquina superior izquierda del elemento del cuerpo.

En su caso, el contenedor contenedor más cercano del tercero es el segundo.


4

Sin embargo, otra respuesta aclaratoria.

Su escenario actual es este:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Y estás luchando con eso.

Si puede cambiar el HTML, simplemente haga esto:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

2
my-wrapper probablemente debería ser .my-wrapper
jdavid.net

Este enfoque es asombroso, todavía no tengo idea de por qué resolvió mi problema. Mi problema es que no puedo hacer que mi tercer elemento sea hijo del primer elemento debido a alguna otra razón.
windmaomao

2

La razón por la que el tercer divelemento está absolutamente posicionado en el segundo divelemento es porque, como explica la especificación CSS aquí , se debe a que el elemento "padre" (mejor dicho: bloque que contiene) de un elemento absolutamente posicionado no es necesariamente su elemento padre inmediato, más bien su elemento posicionado inmediato , es decir, cualquier elemento cuya posición se establezca en cualquier cosa menos, staticpor ejemplo,position: relative/absolute/fixed/sticky;

Por lo tanto, siempre que sea posible en su código, si desea que el tercer divelemento esté absolutamente posicionado con respecto al primero div, debe establecer su segundo divelemento como position: static;su valor predeterminado (o simplemente eliminar cualquier position: ...declaración en el conjunto de reglas de su segundo divelemento) .

Lo anterior hará que el 1º sea divel bloque contenedor del 3º absolutamente posicionado div, ignorando el 2º divpara este propósito de posicionamiento.

Espero eso ayude.


0

En caso de que alguien todavía esté buscando una respuesta a esto.

Pude lograr este resultado agregando un clear: both;estilo al primer div absolutamente posicionado que reinició al niño y le permitió usar su propio absoluteposicionamiento.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.