8
mi piacerebbe creare un elemento div che è "fluttuante", non nel senso della float property, ma letteralmente "galleggiare":galleggiante elemento div
A
risposta
8
position: absolute con un sufficiente z-index alta:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
0
devi farlo usando il posizionamento e lo z-index;
1
Yup, è necessario il CSS per essere simile a questo
.floating-div {
position: absolute;
left: 40px;
top: 40px;
z-index: 100000;
}
4
Si tratta di un follow-up alla risposta di Tatu, che funzionerà, ma usa z-index in modo maldestro, ma molto comune.
L'indice Z determina l'ordine di sovrapposizione degli elementi posizionati rispetto agli altri elementi posizionati. L'ordine di sovrapposizione è anche relativo all'ordine di sovrapposizione degli elementi padre. Quindi:
Quando si hanno due elementi di pari livello in una pagina:
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
Questi sono entrambi impilati in base al loro genitore - la body, che è al suo default 'in basso' dello stack.
Ora, quando questi elementi hanno figli con Z-indici, la loro posizione nella pila è determinata rispetto ai loro genitori posizione:
<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>
ritengo utile per pensare ai bambini come avere un ' point 'z-index - quindi il figlio di un elemento con z-index:1 ha uno z-index di 1.x. In questo modo, puoi vedere che, anche se fornisco a questo div uno z-index di 100000, non verrà mai visualizzato sopra un elemento con l'indice z superiore di 2. 2.x viene sempre visualizzato sopra 1. x
Ciò è utile quando si sta facendo 'fluttuante' le cose come sovrapposizioni, post-it, ecc una messa a punto come questo è un buon inizio:
<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>
Tutto quello che vuoi galleggiare su top va in 'overlayContainer' - gli z-index di base mantengono separati i due 'layers', e puoi evitare di usare z-index in modo confuso come 999999 o 100000.
hehe, Hivemind! –
Se stai usando degli z-index molto alti, probabilmente non li stai usando correttamente. Di solito le persone usano questi come un modo per dire "davvero, davvero, mettilo in cima", ma cosa succede se un altro elemento ha il 100001? Vedi la mia 'risposta' per esempi di codice su un modo migliore per gestire gli z-index. – Beejamin
Sono completamente d'accordo, stavo semplicemente digitando 'grande' per essere odiosamente chiaro sull'importanza del numero che è più alto. –