web-dev-qa-db-ja.com

相対位置決めでz-indexを使用する方法は？

z-indexとコードに問題があります。すべての行にポップアップを表示し、その行に対して相対的に配置します。だから私はこのコードを作成しました：

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

次のスタイルで

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}
htmlcsscss-positionz-index
38
Chris Vaarhorst

要素にposition: relativeを設定すると、新しい包含ブロックが確立されます。そのブロック内のすべての配置は、それに関してです。

そのブロック内の要素にz-indexを設定すると、同じブロック内の他の要素に関してのみレイヤーが変更されます。

私は回避策を知りません。

60
Quentin

relative位置でz-indexを使用できます。 position: relativeを指定するだけです。本当にポップアップしたように見せたい場合は、box-shadowを使用することをお勧めします

.popup {
    position:relative;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 100px;
    background:yellow;
    z-index: 4;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}
3
jagannathbhat

バックdivに負の値のz-indexを追加してみてください

1
user1386213

Z-Indexは、2つ以上の要素が重複する場合にのみ結果が表示されるルールの順序です。これは、絶対位置と同じz-index動作が必要な場合は、それらをオーバーラップさせる必要があることを意味します。相対位置はそれらをオーバーラップさせないので、たとえばこの例では、この2つのdivをオーバーラップさせるために、2番目のdivのトップを-50pxに設定する必要があります。

  <div style="background-color: blue; width: 500px; height: 100px; position: relative">
    <div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1;  top: 0px"></div>
    <div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>  
  </div>
0
R01010010