两个div与同级别

阴影我也有阴影，并在同一个z-index的两个div。两个div与同级别

他们目前都在铸造互相阴影。

我想他们喜欢的背景，但不会彼此都投射阴影。我该怎么做呢？

来源

2012-07-23 Mr_Chimp

在这里贴一些标记 – 2012-07-23 12:41:51

使用背景颜色？ – Christoph 2012-07-23 12:44:59

http://jsfiddle.net/mrchimp/5WQc8/ - 正如你所看到的顶部div有点红。 – 2012-07-23 12:45:16

你不能有相同的堆放层两种不同的元素。元素总是有不同的堆叠级别。这就是为什么你的第二个元素会影响第一个元素。（无z索引在DOM中appearence确定堆叠电平）

Z索引仅适用于非静态定位的元素（相对的，绝对），以便将没有帮助。

IMO你不能达到你想要的效果没有一些小的CSS黑客（声明一个非静态位置的元素结合一个额外的包装元素 - 不要声明z-index父，但只有在子元素上）。

Example

但请随时纠正我，如果我错了。

来源

2012-07-23 13:01:24 Christoph

我认为可能是这种情况。现在我要去掉其中一个div的投影。不理想，但现在足够好！感谢您的回应。 – 2012-07-23 13:20:24

@Mr_Chimp看看我的例子，看看这是否符合你的需求。 – Christoph 2012-07-23 13:26:53

我已经完成了，这是一个很好的解决方法，但现在我只是想解决问题，看看是否有人有另一种方法。正如我所说，现在我已经避免了这个问题，因为这不是一个大问题，但我有兴趣看看人们会怎么做。再次感谢。 – 2012-07-23 14:34:34

使用这个简单的CSS技巧，只是创建伪元件:after，设置其z-索引低于divs并给它一个阴影。以下代码将在每个div下放下不重叠的阴影。工作示例http://jsfiddle.net/on38a8pz/1/。

div { 
    position: relative; 
} 

div:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 0 30px black; 
    z-index: -1; 
}

来源

2014-08-19 09:37:46 MichalVales

两个div与同级别

回答

相关问题