8
Je voudrais créer un élément div qui est « flottant », non pas au sens de l'float property, mais littéralement « flotter »:flottant élément div
A
Répondre
8
position: absolute avec un assez haut z-index:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
0
vous devez le faire en utilisant le positionnement et l'index z;
1
Eh oui, vous avez besoin de votre CSS pour ressembler à quelque chose comme ça
.floating-div {
position: absolute;
left: 40px;
top: 40px;
z-index: 100000;
}
4
Ce fait suite à la réponse de Tatu, qui fonctionnera, mais utilise des z-index de manière maladroite, mais très courante.
L'index Z détermine l'ordre d'empilement des éléments positionnés par rapport aux autres éléments positionnés. L'ordre d'empilement est également relatif à l'ordre d'empilement des éléments parents. Alors:
Lorsque vous avez deux éléments frères et soeurs dans une page:
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
Ceux-ci sont à la fois empilés selon leurs parents - le body, qui est à sa valeur par défaut « bas » de la pile.
Maintenant, lorsque ces éléments ont des enfants avec z-index, leur position dans la pile est déterminée par rapport à leurs parents de 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>
Je trouve utile de penser aux enfants comme ayant un " point 'z-index - donc l'enfant d'un élément avec z-index:1 a un z-index de 1.x. De cette façon, vous pouvez voir que, même si je donne à ce div un z-index de 100000, il n'apparaîtra jamais au-dessus d'un élément avec l'index z parent de 2. 2.x apparaît toujours au-dessus de 1. x
Ceci est utile lorsque vous faites « flottant » des choses comme des superpositions, des post-it, etc. une telle configuration est un bon début:
<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>
Tout ce que vous voulez flotter sur top va dans «overlayContainer» - les z-index de base gardent les deux «layers» séparés, et vous pouvez éviter d'utiliser des z-index de haute confus comme 999999 ou 100000.
hehe, Hivemind! –
Si vous utilisez des index z très élevés, vous ne les utilisez probablement pas correctement. Habituellement, les gens les utilisent comme un moyen de dire «vraiment, vraiment, mettre cela sur le dessus», mais que se passe-t-il si un autre élément a 100001? Voir ma «réponse» pour les exemples de code sur une meilleure façon de gérer les index z. – Beejamin
Je suis tout à fait d'accord, je ne faisais que taper "grand" pour être odieusement clair quant à l'importance du nombre étant plus élevé. –