25

問題があり、これを修正する方法がわかりません。私が望むのは、「赤いボックス」が 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>
4

4 に答える 4

20

おそらく、それを行うために z-index は必要ありません。相対位置と絶対位置を使用できます。

css の配置と、相対配置と絶対配置の違いをよく確認することをお勧めします...要素に設定position: absolute;して、その要素をフロートさせようとしているのを見ました。うまくいかないよ友よ！CSS での配置を理解すると、作業がずっと簡単になります。;)

編集：明確にするために、ポジショニングはそれらの代わりではなく、私は使用しますz-index。私はそれらを使用しないようにしています。どこでも使用z-indexesすることは、最初は簡単で楽しいように思えます...それらに関連するバグがあり、再訪して管理する必要があることに気付くまでz-indexes.

于 2012-05-08T22:10:31.780 に答える
12

次のようにして、コンテナの div メニューにスタイルを配置できます。

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

前 ここに画像の説明を入力

後

ここに画像の説明を入力

于 2015-05-21T07:43:09.647 に答える
2

わかりました。.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/

于 2012-05-08T22:19:16.903 に答える
2 
#right { 
  background-color: red;
  height: 300px;
  width: 300px;
  z-index: 9999;
  margin-top: 0px;
  position: absolute;
  top:0;
  right:0;
}

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

于 2012-05-08T22:07:43.810 に答える