flottant élément div

8

position: absolute avec un assez haut z-index:

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

Source

2010-05-28 12:51:39

0

vous devez le faire en utilisant le positionnement et l'index z;

Source

2010-05-28 12:50:51 Salil

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; 
}

Source

2010-05-28 12:53:27

+0

hehe, Hivemind! –

+0

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

+0

Je suis tout à fait d'accord, je ne faisais que taper "grand" pour être odieusement clair quant à l'importance du nombre étant plus élevé. –

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.

Source

2010-05-28 14:11:33 Beejamin

+0

+ 1- belle et simple réponse – beldaz

+0

Merci beaucoup! – Beejamin

flottant élément div

Répondre

Questions connexes