Posición absoluta pero relativa al padre

291

Tengo dos divs dentro de otro div, y quiero colocar un div infantil en la parte superior derecha del div principal, y el otro div infantil en la parte inferior del div principal usando css. Es decir, quiero usar el posicionamiento absoluto con los dos divs secundarios, pero los coloco en relación con el div principal en lugar de la página. ¿Cómo puedo hacer esto? htmlPosición absoluta pero relativa al padre

muestra:

<div id="father"> 
    <div id="son1"></div> 
    <div id="son2"></div> 
</div>

Fuente

2012-05-07 BlaShadow

¿Quieres SON1 para estar en la esquina superior derecha del padre, pero donde en la parte inferior debe Son2 ser? Abajo a la izquierda, a la derecha o al centro – j08691

En este caso, necesitaría establecer la posición: relativa al elemento padre, y la posición: absoluta a los elementos secundarios. En el primer elemento secundario, debe poner top: 0 y right: 0 para colocarlo en la parte superior derecha del elemento principal. En el segundo hijo, debe poner abajo: 0 para colocarlo en la parte inferior del elemento principal. Hay un gran artículo aquí https://kolosek.com/css-position-relative-vs-position-absolute explicando el posicionamiento relativo y absoluto en detalle. –

541

#father { 
    position: relative; 
} 

#son1 { 
    position: absolute; 
    top: 0; 
} 

#son2 { 
    position: absolute; 
    bottom: 0; 
}

Esto funciona porque position: absolute significa algo así como "uso top, right, bottom, left para posicionarse en relación con el antepasado más cercano que tiene position: absolute o position: relative "

Así que hacer #father tienen position: relative, y los niños tienen position: absolute, a continuación, utilizar topbottom y posicionar los niños.

Fuente

2012-05-07 18:44:11 Domenic

muchas gracias. ¿Puedes explicarme cómo funciona? ¿Por qué? – BlaShadow

¿Por qué '#father {position: relative; } 'requerido? – joshreesjones

es necesario para cambiar la "regla de posición" para aquellos que están dentro de él. – BlaShadow

div#father { 
    position: relative; 
} 
div#son1 { 
    position: absolute; 
    /* put your coords here */ 
} 
div#son2 { 
    position: absolute; 
    /* put your coords here */ 
}

Fuente

2012-05-07 18:43:49

¿Qué sucede si necesita cambiar el tamaño del padre con el hijo? – FrenkyB

Si no le da ninguna posición al padre entonces por defecto toma static. Si se quiere entender que la diferencia se refieren a este ejemplo

Ejemplo 1 ::

http://jsfiddle.net/Cr9KB/1/

#mainall 
{ 

    background-color:red; 
    height:150px; 
    overflow:scroll 
}

Aquí clase padre no tiene una posición por lo que el elemento se coloca de acuerdo a cuerpo.

Ejemplo 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall 
{ 
    position:relative; 
    background-color:red; 
    height:150px; 
    overflow:scroll 
}

En este ejemplo los padres tiene posición relativa de ahí elemento están colocados absoluta dentro padre relativa.

Fuente

2014-03-13 11:12:28 anam

Y, ¿qué pasa si no tiene #mainall {height: 150px} ...? Quiero decir, si mainall tiene altura dinámica? –

, entonces su elemento flotante será relativo a la posición que tenía el elemento padre cuando se cargó la página (y el css). Si desea actualizar eso después de cargar la página, use javascript - clientX y clientY son un buen lugar para comenzar –

En caso que alguien quiere Postion un niño div directamente debajo de uno de los padres

#father { 
    position: relative; 
} 

#son1 { 
    position: absolute; 
    top: 100%; 
}

Trabajando demostración Codepen

Fuente

2017-04-05 07:11:27 petergus

Posición absoluta pero relativa al padre

Respuesta

Cuestiones relacionadas