Html 如何使两个元素处于同一位置；“深度”；在DOM中？

使两个元素在z轴上彼此平行渲染似乎是不可能的。换句话说，如果我把我的网站转向一边，我永远看不到它们两个在同一个深度层次上；即使是具有相同

z索引的元素，也会根据它们在DOM中的顺序被视为处于不同的级别

这是一个问题，因为有时我需要使用长方体阴影渲染两个相邻的元素，作为设计的一部分，它们应该处于同一级别，而不是将阴影投射到彼此上，而是投射到它们下面的元素上

为什么会这样？如何防止浏览器以相同的
z-index
在同一级别渲染两个元素？此外，是否有解决此问题的方法或解决方法

现在我正在开发一个网站，这是一个问题。例如，请参见此设计，其中两个框（包含流派/评论的框和包含投票/标题的框）相邻浮动，彼此之间有一个小空间，但属于同一组，不应相互投射框阴影，因为两者都不应较高或较低：

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

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

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

这里。
我刚刚想到了一个窍门：

创建每个需要框阴影的元素的重复元素，并将重复元素放置在比应该显示有阴影的元素更低的z索引处


#深度更高{
位置：绝对位置；
z指数：2；
}
#深度较低{
位置：绝对位置；
z指数：1；
}
#foo，#bar{
背景颜色：绿色；
利润率：7px；
宽度：50px；
高度：50px；
}
#foo#u shadow，#bar#u shadow{
盒影：0px 0px 50px 0px#000；
利润率：7px；
宽度：50px；
高度：50px；
}

不要认为你应该尝试找出为什么没有元素可以具有相同的“深度”，而是分享一些相关的代码，我相信这里的很多人都可以帮助你；你问的方式太笼统了……我同意@webeno。我真的想不出一个好的场景，我需要一个盒子阴影。两个元素中的一个位于另一个元素之上，或者，如果它们都需要在其他元素上投射阴影，我会将它们分组到父元素中，并将阴影指定给该元素。@webeno该示例是否有帮助？从设计角度看，我不会在您的示例中添加阴影，但这是个人喜好。同样，你的图片中没有阴影，但我相信，这就是问题：考虑一下这个场景：当两个元素碰撞时，它们会纠缠在一起吗？它们会像两辆汽车的碰撞区那样相互碰撞吗。。。这就是为什么两个元素永远不能处于完全相同的z索引。这两个元素需要稍微分开一点。@CuriousProgrammer你是说有一个小间隙吗？这无关紧要（实际上最好避免重叠阴影）。请参阅@CuriousProgrammer，或者如果您的意思是间隙应该是清晰的（没有阴影），那么只需将框阴影应用于父框，即我的示例中的div.row。@mrmoment:很好的解决方案，甚至可以更好地说明它。
<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;
}