Pływające elementu div

8

position: absolute z wystarczająco z-index wysoka:

#element { 
    position: absolute; 
    top: 50px; 
    left: 200px; 
    z-index: 10; 
}

Źródło

2010-05-28 12:51:39

0

trzeba zrobić za pomocą pozycjonowania i z-indeksu;

Źródło

2010-05-28 12:50:51 Salil

1

Tak, trzeba swój CSS, aby wyglądać jak ten

.floating-div { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    z-index: 100000; 
}

Źródło

2010-05-28 12:53:27

+0

hehe, Hivemind! –

+0

Jeśli używasz naprawdę wysokich takich indeksów, prawdopodobnie ich nie używasz. Zwykle ludzie używają ich jako sposobu na powiedzenie "naprawdę, naprawdę, umieść to na górze", ale co się stanie, jeśli inny element ma 100001? Zobacz moją "odpowiedź" na przykłady kodu na lepszy sposób zarządzania z-indeksami. – Beejamin

+0

Zgadzam się całkowicie, po prostu pisałem "duży", aby być nieprzyjemnie jasnym co do znaczenia wyższej liczby. –

4

ten jest kontynuacją odpowiedzi tATu, która będzie działać, ale używa z-indeksów w sposób niezgrabny, ale bardzo powszechny.

Indeks Z określa kolejność układania pozycjonowanych elementów w stosunku do innych pozycjonowanych elementów. Kolejność układania jest również względna w stosunku do kolejności elementów macierzystych. Więc:

Kiedy masz dwie siostrzane elementy strony:

<body> 
    <div style="position:absolute;z-index:2"></div><!-- Position 2 (top) --> 
    <div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) --> 
</body>

Są to zarówno ułożone według ich rodziców - w body, co jest w jego domyślnej „dołu” stosu.

Teraz, gdy te elementy mają dzieci z-indeksów, ich pozycja w stosie jest ustalana w stosunku do rodziców stanowisko:

<body> 
    <div style="position:absolute;z-index:2"><!-- Position 2 (top) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 2.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 2.1 --> 
    </div> 
    <div style="position:absolute;z-index:1"><!-- Position 1 (bottom) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 1.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 1.1 --> 
    </div> 
</body>

Uważam, że warto pomyśleć o dzieciach jako o " point 'z-index - więc element potomny elementu o numerze z-index:1 ma indeks Z wynoszący 1.x. W ten sposób możesz zauważyć, że nawet jeśli podaję ten div z-index 100000, to nigdy nie pojawi się na wierzchu elementu z nadrzędnym z-indexem 2. 2.x zawsze pojawia się na górze 1. x

Funkcja ta jest przydatna, gdy robisz „pływający” rzeczy jak nakładki, post-it, itd. A konfiguracja jak to jest dobry początek:

<body> 
    <div id="contentContainer" style="position:relative;z-index:1"> 
     All your 'page level content goes here. You can use all the z-indexes you like. 
    </div> 
    <div id="overlayContainer" style="position:relative;z-index:2"> 
     Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it. 
    </div> 
</body>

Cokolwiek chcesz unosić się na wierzchołek przechodzi w "overlayContainer" - podstawowe indeksy z-z zachowują dwie "warstwy" oddzielnie i można uniknąć używania myląco wysokich indeksów z, takich jak 999999 lub 100000.

Źródło

2010-05-28 14:11:33 Beejamin

+0

+ 1- piękna i prosta odpowiedź – beldaz

+0

Dziękuję bardzo! – Beejamin

Pływające elementu div

Odpowiedz

Powiązane problemy