web-dev-qa-db-ja.com

コンテンツの最上部に常にメニューを作成する「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>
cssz-index
17
rmz

ほとんどの場合、そのためにz-indexは必要ありません。相対配置と絶対配置を使用できます。

Cssポジショニングと、相対ポジショニングと絶対ポジショニングの違いをよく見ることをお勧めします。要素に追加し、その要素をフロートさせようとします。それは友達には働きません！ CSSでのポジショニングを理解すると、作業がずっと簡単になります！ ;）

14
rafaelbiten

コンテナのdivメニューにスタイルを入れることができます：

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

前 enter image description here

後

enter image description here

5
Tarek Kalaji

OK、コンテナ内に.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/

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

位置：絶対; top：0; right：0;ここで仕事をしてください！ :)フローティングも削除してください！

2
creativeby