CSS：z-index問題

Question

我有純CSS的便利貼 。 我已經在jsfiddle中實現了它。 看起來都很不錯！

但是，在我的情況下，我還有一個css的div，如下所示：

div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-color: green;
}

有了該div后，用於post-it的css效果就混亂了。 z-index似乎是個問題！ 但是，我擺弄了z-index es，但無法修復它。 查看顯示問題的jsfiddle 。 無論如何，柱子可以固定嗎？

Answer 1

根據您的html結構

<div></div>
<div id="box">
       Text Here
</div>

您已將CSS應用於div

div {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

並且您將單獨的CSS連同偽屬性一起應用於“ #box” div。

但是，當您為div定義z-index時，它將應用於所有div元素。

因此，：belos的：before和：after的z-index屬性與所有div元素提到的屬性相同。

因此，要克服此問題，您需要將某些類或ID應用於父div

請同樣參考小提琴 。

或應用z-index: auto #box div中的z-index: auto

請參考另一個小提琴 。

Answer 2

您需要在box div上重置z-index。 因此，偽選擇器上的z-index語句正確適用。 添加以下行：

#box {
    [...]
    z-index: auto;
}

正如其他人提到的那樣。 您的一般div樣式與位於：before和：after的z-index語句沖突。 但是我想你有這個理由。

Answer 3

您的“ div”風格將同時應用於兩個Divs。

<div id="myDiv"></div>
<div id="box">
   Text Here
</div>

#myDiv {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: blue;
 z-index: -3;
}

希望這可以幫助。

Answer 4

您沒有給div一個類名，因此所有div都將得到該CSS。 這會起作用

http://jsfiddle.net/g29ns/4/

    <div class="givethisdivaclass"></div>
<div id="box">
       Text Here
</div>


div.givethisdivaclass {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

#box{
    width:300px;
    height:300px;
    margin:50px auto;
    position:relative;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

#box:after{
    -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
    position:absolute;
    content:'';
    background:transparent;
    bottom:10px;
    right:9px;
    width:70%;
    height:70%;
    -webkit-transform: rotate(5deg) skew(10deg);
    z-index: -2;
}

#box:before{
    z-index:-1;
    -webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
    position:absolute;
    content:'';
    background:transparent;
    bottom:46px;
    right:41px;
    width:50%;
    height:50%;
    -webkit-transform: rotate(20deg) skew(45deg);
}

Answer 5

 <!-- gave a unique id to the div to avoid the issue -->
<div id="boxNew"> </div> 

像這樣，

#boxNew {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

觀看演示