css：问题与Z索引

我有这个不错的post-it纯CSS。我在jsfiddle中实现了它。看起来非常好！css：问题与Z索引

然而，在我的情况我也有与CSS股利如下：

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

有了该div，所使用的CSS效果后它搞砸了。这似乎是z-index的问题！但是，我已经摆弄了z-index es，但我无法修复它。结帐这jsfiddle其中显示的问题。无论如何，邮政可以修复吗？

来源

2014-03-19 Jeanluca Scaljeri

能不能请你定义 '问题' – George

为什么这里有两个的jsfiddle？ –

我已经添加了解释。一个jsfiddle没有'div'，在这种情况下，它看起来很好。第二个有这个div，它对后期造型有影响 –

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

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

正如别人提到这一点。你一般DIV风格的冲突与z-index的语句是：并前：后。但我猜你有一个原因。

来源

2014-03-19 09:26:48 Zhonk

您的“格”的风格是越来越应用到的div 使用这样的事情：

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

希望这有助于。

来源

2014-03-19 09:24:41

你没有给你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); 
}

来源

2014-03-19 09:25:16

根据你的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“＃盒子“div以及伪属性。

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

因此，Z-index属性为：前和：后ALOS获得与所提到的所有div元素相同的属性一起应用。

因此，要克服这一点，你需要一些类或ID适用于父DIV

请参考the fiddle的一样。

或应用z-index: auto在#box DIV

请参考another fiddle的一样。

来源

2014-03-19 09:25:40 Mazzu

@Jananca Scaljeri，你说得对吗？ – Mazzu

<!-- 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

来源

2014-03-19 09:33:19 newTag

css：问题与Z索引

回答

相关问题