Html 父插入框阴影被子div重叠

我遇到了这样一个问题：children div与parents框阴影底部重叠

父级具有最大高度w/overflow-y:滚动。任何帮助都会很好

HTML:

---

问题是子元素在堆叠上下文中比父元素高。要使阴影显示通过，需要使其低于父对象

首先，您需要定位元素以使

z-index

应用，然后将

z-index

减少到低于父级的值。例如

.thread {
    position: relative;
    z-index: -1;
}

或者，由于

.threads

已定位，并且

框阴影

位于其父元素上，您可以直接在该元素上添加

z索引

：

.threads {
    z-index: -1;
}

---

不，你所要求的很容易做到。不过，为了方便起见，我建议使用背景图像或CSS渐变，而不是插入框阴影。您必须稍微调整CSS以获得您想要的内容。（例如，确保底部覆盖层不覆盖滚动条的底部箭头）

只有当您只需要显示静态文本和图像，并且没有链接或交互内容时，才可以在子元素上设置z索引。您也不允许为父对象设置背景，否则会隐藏子对象。

要实现这一点，您需要创建两个单独的阴影覆盖div，并将它们绝对放置在父容器中。您的结构如下所示：

• 父容器
  • 阴影覆盖左
  • 阴影覆盖底部
  • Threadcontainer（此div上设置了溢出）
    • 线
    • 线

下面是一个工作演示：

#阴影覆盖#左侧{
宽度：10px；
身高：100%；
位置：绝对位置；
z指数：5；
盒影：插入3px-2px 5px 0px#000；
}
#阴影覆盖层底部{
宽度：100%；
最小高度：10px；
位置：绝对位置；
底部：0%；
z指数：5；
盒影：插入0px-5px 9px 0px#000；
}
.线程{
溢出y：滚动；
溢出x：隐藏；
}

注意，我将溢出属性放在

.threads

容器上，而不是父容器上。这是因为除此之外，绝对定位的div也将滚动，并且不会填充其各自的宽度/高度

---

同样，您可以将框阴影、背景图像或CSS渐变应用于阴影覆盖div。

您可以单独使用定位和框阴影，但浏览器支持较差。我使用了

position:sticky

（不支持Chrome），但无论如何，这是一个有趣的实验

<div class="wrap">
<!-- We set the overflow on the parent -->
    <div class="shadow"></div>
    <!-- Create a new container as a layer over the rest of the content -->
    <div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

再一次-这是实验性的，浏览器支持在某些地方是缺乏的，但是证明了你只能用CSS来实现

---

Zenith-如果向下滚动，您会注意到边界线与阴影重叠。但我想我是想错了。我基本上希望阴影与子对象重叠。这只在用户不应该像OP要求的HTML那样与图板进行任何交互的情况下起作用。子元素上的任何链接或javascript事件都不会触发，这是真的。嵌入框阴影被绘制到背景上，因此很难进行其他修复，除非向子对象添加类似的框阴影以使其对齐。但是阴影可能会“泄漏”到垂直轴，所以这并不总是有效的。

.threads {
    z-index: -1;
}

<div class="wrap">
<!-- We set the overflow on the parent -->
    <div class="shadow"></div>
    <!-- Create a new container as a layer over the rest of the content -->
    <div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

.wrap{
  border: 1px solid #dadada;
  /* You'll need a fixed height - assuming that's the case already, given the overflow */
  height: 400px;
  margin: 5vh auto;
  overflow-y: auto;
  width: 50vw;
}
.content{
  margin-top: -400px;
}
.shadow{
  box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.3) inset;
  height: 100%;
  /* To avoid objects below not being accessible we use pointer events - CSS4 and wonky IE support again */
  pointer-events: none;
  position: sticky;
  /* Firefox doesn't really need the vendor prefix and Chrome doesn't support this */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 0;
  width: 100%;
}
.item{
  /* You would obviously add your own styling - just making boxes that show the concept */
  background: white;
  border: 1px solid #dadada;
  box-sizing: border-box;
  float: left;
  height: 250px;
  margin: 1%;
  width: 23%;
}
.item:hover{
  /* To demonstrate the click through the top layer and :hover works */
  background: #f3f3f3;
}