4

絶対位置の要素を相対位置の要素の下に配置しようとしています。ブルーボックスは、サイト開発内の制約のために比較的配置する必要があります。

ふきだしが青いボックスで、ふきだしの尾が：after疑似要素であると想像してください。これらの2つの要素の背景を保持するために、これらの両方の背後にある緑色のボックスが必要です。

div.layer01 {
    background-color: blue;
    position: relative;
    z-index: 10;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: 5;
}
<div class="layer01"> <!-- speech bubble -->
    <div class="layer02">Why isn't this below the blue?</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non dolor quis leo malesuada pharetra at in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

修理：

比較的配置された要素から配置したい要素を取得し、コンテンツを新しいdivにラップしました。マークアップを追加しますが、これが唯一の方法のようです。

4

2 に答える 2

7

編集：私は誤った情報を受け取りました。CSS2.1で負のインデックスが導入されました。この解決策はまだ正しいですが、それがハックであるという私のコメントは正しくありません。

子要素は、絶対に配置されている場合でも、ハックを使用しない限り、親要素の下に置くことはできません。

ハックは、親からz-indexプロパティを削除し、子要素に負のz-indexを与えることです。

http://jsfiddle.net/uZdy3/1/

div.layer01 {
    background-color: blue;
    position: relative;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: -5;
}

ただし、このハッキングを回避するには、レイアウトをリファクタリングする方がはるかに優れています。

于 2012-05-15T13:38:31.773 に答える
2

2011年半ばのCSS2.1以降、安全で合法である正しい対応は、負のZインデックスを使用することです。この動作は、元のChrome、元のSafari、元のOpera、IE4、Firefox 3に戻って、すべての主要なブラウザで十分にサポートされています。これをサポートする最後のブラウザは2008年に始まりました。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

于 2014-10-08T20:21:44.497 に答える