Question

我有一个很好的post-it纯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应用于＆＃34;＃box＆＃34; div和伪属性。

但是当您为div定义z-index时，它会应用于所有div元素。

因此，以及：之前和之后的z-index属性与所有div元素所提及的相同属性一起被应用。

因此，要解决此问题，您需要将一些类或ID应用于父div

请参阅the fiddle了解相同内容。

或在#box div中应用z-index: auto

请参阅another fiddle了解相同内容。

Answer 2

您需要重置盒子div上的z-index。因此伪选择器上的z-index语句正确应用。添加以下行：

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

正如其他人提到的那样。您的一般div样式与z：index语句冲突：before和：after。但我想你有理由这样做。

Answer 3

你的风格为＆＃39; div＆＃39;正在适用于Divs＆＃39; 使用这样的东西：

<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;
}

See demo

css：z-index问题

5 个答案: