2013-09-30 7 views
5

W HTML, kiedy używasz pozycji: absolutna właściwość css w bloku potomnym, wartość bezwzględna nie jest pobierana z tagu nadrzędnego, to odwołuje się z całego okna przeglądarki. przykładowy kod znajduje się poniżej ..kiedy używam position: absolute w bloku potomnym to nie dotyczy bloku nadrzędnego?

CSS

.parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid green; 
} 

.child { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    bottom: 0px; 
} 
+3

Dlaczego pytasz to pytanie, jeśli już zna odpowiedź? Każdy, kto nawet szuka najbardziej podstawowego zapytania "position: absolute" w Google, odkryje, że potrzebujesz "względnego" kontenera (lub innego nie -statycznego "). Tak jak ja to widzę, zadałeś tylko to pytanie, żeby zdobyć reputację z systemu - już 55 zyskałeś! –

+0

@Kolink: Umieszczenie pytania, na które znasz odpowiedź, a następnie udzielenie odpowiedzi jest w porządku, ale masz rację, ponieważ jest to naprawdę podstawowe i często zadawane pytanie, na które można odpowiedzieć za pomocą prostego wyszukiwania w Google. – BoltClock

+0

@Kolink wygląda na to, że to rodzaj spamu! –

Odpowiedz

10

Jeśli chcesz zorganizować dziecku w bloku nadrzędnego tylko dodać position:relative w CSS dominującej

2

rodzic potrzeb blokowe mieć wartość position ustawioną na wartość niestatyczną, czyli: position: absolute, lub position: relative.

Wymagana wartość zależy od aplikacji układu.

1
.parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid green; 
    position:relative;/*this makes all my children s position relative to me */ 
} 

.child { 
    position: absolute;/* i have an absolute position and i am relative to my parent*/ 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    bottom: 0px; 
} 

Demo: http://jsfiddle.net/pGvvq/

markup:

<section class=parent> 
    this makes all my children s position relative to me 
    <article class=child> 
     i have an absolute position and i am relative to my parent 
    </article> 
</section> 

enter image description here

PRZECZYTAJ więcej http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Powiązane problemy