如何让两个元素在DOM中处于相同的“深度”？

Question

似乎不可能使两个元素在z轴上呈现为彼此平行。换句话说，如果我要将我的网站转向侧面，我永远不会在同一深度级别上看到其中的两个;即使具有相同z-index的元素也会根据它们在DOM中的顺序被视为处于不同的级别。

这是一个问题，因为有时我需要使用框阴影渲染两个附近的元素，并且作为设计的一部分，它们应该处于同一级别，而不是将阴影投射到彼此上，而是放在它们下面的元素上。 / p>

为什么会这样？是什么阻止浏览器在同一级别呈现具有相同z-index的两个元素？此外，这个问题是否有解决方案或解决方法？

现在我正在开发一个存在问题的网站。例如，请参阅此设计，其中2个框（包含流派/注释的框和包含投票/标题的框）彼此相邻，并且它们之间有一个小空间，但是属于同一组，并且不应该投射框相互影响，因为它们都不应该更高或更低：

Answer 1

您可以添加具有所需背景颜色的内部包装块元素。

<div class="container">
    <div class="row">
        <div class="col pull-left">xxx</div>
        <div class="col pull-right">yyy</div>
    </div>
</div>

.col{
    width:50%;
    box-shadow: 0 0 10px #222;
}

在这种情况下，如您所述，将box-shadow应用于div.col将使一个块的阴影区域超过另一个块。 （.pull-left和.pull-right来自Bootstrap，只是浮动效果。）

通过这样做，

<div class="container">
    <div class="row">
        <div class="col pull-left"><div class="wrapper">xxx</div></div>
        <div class="col pull-right"><div class="wrapper">yyy</div></div>
    </div>
</div>

.wrapper{
    width:100%;
    position:relative;
    z-index:99;
    background:#fff;
}

您可以看到插入的div.wrapper覆盖了重叠的阴影。

JSFiddle此处。

Answer 2

我只想到了一个诀窍：

创建需要框阴影的每个元素的重复元素，并将重复项放在比应该看起来有阴影的元素更低的z-index处。

＆＃13;

＆＃13;

#depth_higher{
  position:absolute;
  z-index:2;
}
#depth_lower{
  position:absolute;
  z-index:1;
}
#foo, #bar{
  background-color:green;
  margin:7px;
  width:50px;
  height:50px;
}
#foo_shadow, #bar_shadow{
  box-shadow:0px 0px 50px 0px #000;
  margin:7px;
  width:50px;
  height:50px;
}

＆＃13;

<div id="depth_higher">
  <div id="foo"></div>
  <div id="bar"></div>
</div>
<div id="depth_lower">
  <div id="foo_shadow"></div>
  <div id="bar_shadow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;