Bezwzględne pozycjonowanie wewnątrz względnego pozycjonowania?

Question

Według w3schools (http://www.w3schools.com/css/css_positioning.asp)

względnie umieszczone elementy są często stosowane jako bloki pojemników na całkowicie umieszczonych elementów.

Dlaczego tak jest? Czy istnieje dobry przykład?

Answer 1

Dobrym przykładem może być położenie elementu na stronie lub "względny" do kontenera/elementu div.

Oto moja Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

To pokazuje, że bez absolutnej div będącego wewnątrz „względnej” div, zawartość są dostosowane do treści dokumentu.

Zauważ, że zielony div (#box1), który ma position: relative, div wewnątrz (#inner1) jest wyrównany górę/w prawo wewnątrz #box1.

niebieskim polu (#box2), który ma dokładnie taki sam układ HTML jako zielonym polu (#box1), nie zawiera position: relative i zauważ, że div wewnątrz niego (#inner2) jest wyrównany do górnej/prawej stronie body

#box1, #box2 { 
    width: 100px; 
    height: 100px; 
    color: white; 
    text-align: center; 
    line-height: 100px; 
} 
#box1 { 
    background: green; 
    position: relative; 
} 
#box2 { 
    background: blue; 
} 

#inner1, #inner2 { 
    width: 50px; 
    height: 50px; 
    top: 0; 
    right: 0; 
    position: absolute; 
    background: black; 
    opacity: 0.5; 
    color: white; 
    text-align: center; 
    line-height: 50px; 
} 

---

Oto dobry artykuł o tym z Chrisem Coyier ...

Element strona ze względnym położenie, Dzięki temu możesz całkowicie odmienić elementy podrzędne w obrębie tego elementu.

Źródło: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

Jeśli absolutny elementu pozycjonowanego nie jest względnym elementu wtedy, gdy ustawiony górny, lewy, prawy lub bot o wartości, to ruszy absolutnej pozycji od elementu ciało o tę wartość. Co to oznacza? Na przykład, jeśli ustawisz atrybut elementu pozycji bezwzględnej, góra, na 10 pikseli, przesunie element 10 pikseli od góry ekranu.

Jeśli element pozycji bezwzględnej znajduje się w elemencie względnym, to po ustawieniu góry, lewej, prawej lub bota wartością, przeniesie on element pozycji bezwzględnej z tego elementu względnego o tę wartość. Co to oznacza? Na przykład, jeśli ustawisz atrybut bezwzględnego położenia elementu, górny, na 10px, to popchnie element 10 pikseli od góry elementu względnego. Tam możesz przesuwać element względny, a element pozycjonowany absolutnie w środku zawsze będzie miał 10 pikseli od wierzchołka względnego elementu.

Answer 3

Jakie inne odpowiedzi nie wyraźnie stan jest taki:

Absolute pozycjonowania mierzy się w najbliższym przodka, który nie ma pozycjonowanie statycznej. Dawanie pozycji względnej przodka jest tylko środkiem do tego celu. Nie musi być względny, po prostu nie może być statyczny.

Element z pozycją absolutną i

do góry: 10 pikseli;

będzie 10 pikseli od wierzchołka najbliższego przodka, którego pozycja nie jest statyczna.