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

J'ai un problème et je ne vois pas comment remédier à cela. Ce que je veux, c'est que la "zone Rouge" rester sur le haut de la page dans un z-index 2, tandis que la totalité du contenu de l'arrière-plan séjour à l'index 1, mais en quelque sorte de ce code est de "réduire" les couches. Si quelqu'un peut m'aider j'ai vraiment l'apprécier. Désolé pour mon anglais. Merci à l'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>

source d'informationauteur rmz | 2012-05-08

  1. 11

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

    Je vous conseille de prendre un meilleur regard sur css de positionnement et de la différence entre la relative et absolue de positionnement... j'ai vu de la configuration de position: absolute; à un élément et d'essayer de flotteur de cet élément. Il ne fonctionnera pas ami! Lorsque vous comprendre le positionnement en CSS, il rendra votre travail beaucoup plus facile! 😉

  2. 4

    vous pourriez mettre le style dans un conteneur div menu avec:

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

    avant
    Comment

    après

    Comment

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

    position: absolute; top:0; right:0; faire le travail ici! 🙂
    Également supprimer l'flottante!

  4. 2

    Ok, Im en supposant que vous voulez mettre l' .de gauche à l'intérieur du conteneur, donc je vous suggère de modifier votre code html. La clé est la 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/