Mam dwa div div wewnątrz innego div i chcę ustawić jeden div div w prawym górnym rogu div rodzica, a drugi div div na dole rodzica div za pomocą css. Tzn. Chcę użyć pozycjonowania bezwzględnego z dwoma div div, ale ustaw je względem div diva, a nie strony. W jaki sposób mogę to zrobić?
Przykładowy HTML:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Odpowiedzi:
To działa, ponieważ
position: absolute
oznacza coś jak „użytkutop
,right
,bottom
,left
aby ustawić się w stosunku do najbliższego przodka, który maposition: absolute
lubposition: relative
”.Więc robimy
#father
miećposition: relative
, a dzieci mająposition: absolute
, a następnie użyćtop
ibottom
do położenia dzieci.źródło
#father { position: relative; }
wymagane?static
.źródło
Jeśli ktoś chce umieścić div dziecka bezpośrednio pod rodzicem
Działające demo Codepen
źródło
Jeśli nie podasz żadnej pozycji rodzicowi, wówczas domyślnie zajmie
static
. Jeśli chcesz zrozumieć tę różnicę, zapoznaj się z tym przykłademPrzykład 1::
http://jsfiddle.net/Cr9KB/1/
Tutaj klasa nadrzędna nie ma pozycji, więc element jest umieszczany zgodnie z treścią.
Przykład 2 ::
http://jsfiddle.net/Cr9KB/2/
W tym przykładzie rodzic ma pozycję względną, dlatego element jest pozycjonowany absolutnie wewnątrz względnego rodzica.
źródło