web-dev-qa-db-fra.com

Comment "z-index" pour faire un menu toujours au-dessus du contenu

J'ai un problème et je ne sais pas comment y remédier. Ce que je veux, c'est que la "boîte rouge" reste en haut de la page dans un z-index 2, tandis que tout le contenu en arrière-plan reste sur l'index 1 mais en quelque sorte ce code "réduit" les couches. Si quelqu'un peut m'aider, je l'apprécie vraiment. Désolé pour mon anglais. Merci d'avance.

<html>
<head>
<title></title>
<style type="text/css">

body { margin: 0; }

#container {
    position: absolute;
    float: right;
    z-index: 1;

}

.left1 { 
    background-color: blue;
    height: 50px;
    width: 100%;

}
.left2 { 
    background-color: green;
    height: 50px;
    width: 100%;

}


#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    float:right;
    z-index: 999999;
    margin-top: 0px;
    position: relative;
}




</style>
</head>

<body>

<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>

</body>
</html>
cssz-index
17
rmz

Vous n'avez probablement pas besoin de z-index pour cela. Vous pouvez utiliser un positionnement relatif et absolu.

Je vous conseille de mieux regarder le positionnement css et la différence entre le positionnement relatif et absolu ... J'ai vu que vous définissez la position: absolue; à un élément et essayer de faire flotter cet élément. Ça ne marchera pas ami! Lorsque vous comprenez le positionnement en CSS, cela facilitera votre travail! ;)

14
rafaelbiten

vous pouvez mettre le style dans le menu div du conteneur avec:

<div style="position:relative; z-index:10">
   ...
   <!--html menu-->
   ...
</div>

avant enter image description here

après

enter image description here

5
Tarek Kalaji

Ok, je suppose que vous voulez mettre le .left à l'intérieur du conteneur, donc je vous suggère de modifier votre html. La clé est le position:absolute et right:0

#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    z-index: 999999;
    margin-top: 0px;
    position: absolute;
    right:0;
}

voici le code complet: http://jsfiddle.net/T9FJL/

2
adedoy
#right { 
  background-color: red;
  height: 300px;
  width: 300px;
  z-index: 9999;
  margin-top: 0px;
  position: absolute;
  top:0;
  right:0;
}

position: absolue; en haut: 0; à droite: 0; faites le travail ici! :) Retirez également le flottant!

2
creativeby