Как "z-index" сделать меню всегда поверх содержимого

У меня проблема, и я не могу понять, как это исправить. Я хочу, чтобы "красный ящик" оставался на вершине страницы в z-index 2, в то время как весь контент на фоне оставался на индексе 1, но каким-то образом этот код "сворачивал" слои. Если кто-то может мне помочь, я действительно ценю это. Извините за мой английский. Спасибо заранее.

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

Ответы

Ответ 1

Вам, скорее всего, не нужен z-index для этого. Вы можете использовать относительное и абсолютное позиционирование.

Я советую вам лучше взглянуть на позиционирование css и разницу между относительным и абсолютным позиционированием... Я видел, что вы устанавливаете положение: абсолютное; к элементу и пытается поместить этот элемент. Это не сработает друг! Когда вы понимаете позиционирование в CSS, это сделает вашу работу намного проще!;)

Ответ 2

вы можете поместить стиль в меню контейнера div с помощью

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

перед тем enter image description here

после

enter image description here

Ответ 3

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

позиция: абсолютная; верх: 0; право: 0; сделайте работу здесь!:) Также удалите плавающий!

Ответ 4

Хорошо, я предполагаю, что вы хотите поместить .left внутри контейнера, поэтому я предлагаю вам отредактировать свой html. Ключом являются position:absolute и right:0

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

вот полный код: http://jsfiddle.net/T9FJL/