8
Ich möchte ein div-Element erstellen, das „schwebende“ ist, nicht im Sinne des float property, sondern wörtlich „float“:Schwimmdock div Element
A
Antwort
8
position: absolute mit einer ausreichend hohen z-index:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
0
Sie haben es zu tun mit Positionierung und Z-Index;
1
Yup, müssen Sie Ihre CSS so etwas wie dieses
.floating-div {
position: absolute;
left: 40px;
top: 40px;
z-index: 100000;
}
4
sehen Dies ist eine Antwort des Follow-up zu Tatu, das wird funktionieren, aber verwendet Z-Indizes in einer ungeschickten, aber sehr üblichen Weise.
Z-Index bestimmt die Stapelreihenfolge positionierter Elemente relativ zu anderen positionierten Elementen. Die Stapelreihenfolge ist auch relativ zur Stapelreihenfolge der Elternelemente. Also:
Wenn Sie zwei Geschwister Elemente auf einer Seite:
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
Diese sind beide gestapelt nach ihren Eltern - die body, der an seinem Standard ‚unten‘ ist von dem Stapel.
Nun, wenn diese Elemente Kinder mit Z-Indizes haben, ihre Position in dem Stapel bestimmt wird, im Verhältnis zu ihren Eltern Position:
<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>
Ich finde es nützlich, die Kinder zu denken, als eine mit " Punkt 'Z-Index - so hat das Kind eines Elements mit z-index:1 einen Z-Index von 1.x. Auf diese Weise können Sie sehen, dass, selbst wenn ich diesem div einen Z-Index von 100000 gebe, es nie über einem Element mit dem Eltern-Z-Index von 2 erscheinen würde. 2.x erscheint immer über 1. x
Dies ist nützlich, wenn Sie die Dinge wie Overlays ‚schwebenden‘, Post-it notes, usw. wie diese ein Setup ist ein guter Anfang:
<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>
Alles, was Sie wollen schwimmen auf top geht in 'overlayContainer' - die Basis-Z-Indizes halten die beiden 'Ebenen' getrennt, und Sie können vermeiden, verwechselnd hohe Z-Indizes wie 999999 oder 100000.
hehe, Hivemind! –
Wenn Sie wirklich hohe Z-Indizes verwenden, verwenden Sie sie wahrscheinlich nicht richtig. Normalerweise benutzen Leute diese als eine Art zu sagen 'wirklich, wirklich, setzen Sie das auf die Spitze', aber was passiert dann, wenn ein anderes Element 100001 hat? In meiner "Antwort" finden Sie Codebeispiele für eine bessere Verwaltung von Z-Indizes. – Beejamin
Ich stimme voll und ganz zu, ich habe gerade 'groß' eingegeben, um unverschämt klar zu sein, wie wichtig es ist, dass die Zahl höher ist. –