Question

我遇到一个问题，其中子div与父盒子阴影底部重叠。

父级有一个最大高度w / overflow-y：scroll。任何帮助都会很棒！

http://i.stack.imgur.com/jQe0r.png

HTML：

<div class="capture sh-btm">
  <div class="threads">
    <div class="thread"></div>
    <div class="thread"></div>
    <div class="thread"></div>
    <div class="thread"></div>
  </div>
</div>

CSS：

.capture {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.threads {
  height: 250px;
  width: 100%;
  display: inline-block;
  padding-bottom: 10px;
  position: relative;
  clear: left;
}

.thread {
  width: 248px;
  float: left;
  margin-right: 8px;
  margin-top: 6px;
  border-bottom: 2px solid #dadada;
  overflow: hidden;
  zoom: 1;
}

.sh-btm {
  box-shadow: inset 0px -5px 9px -2px #000;
}

Answer 1

不，你问的问题可以很容易地完成。但是，为了方便起见，我建议使用背景图像或CSS渐变而不是插入框阴影。你必须稍微调整一下CSS才能得到你想要的东西。（例如，确保底部覆盖层不覆盖滚动条的底部箭头）。

在子元素上设置z-index只有在您只有静态文本和图像才能显示，并且没有链接或交互式内容时才有效。您也不被允许为父母设置背景，或者它将隐藏孩子。

要实现此目的，您需要制作2个单独的阴影叠加div，并将它们绝对放在父容器中。你的结构将是这样的：

父容器
- 影子叠加
- 阴影叠加底部
- Threadcontainer （在此div上设置溢出）
  - 发
  - 发

这是一个有效的演示：http://jsbin.com/avafaq/1/edit

<div class="capture sh-btm">
  <div id="shadow_overlay_left"></div>
  <div id="shadow_overlay_bottom"></div>
  <div class="threads">
    <div class="thread"></div>
    <div class="thread"></div>
  </div>
</div>

#shadow_overlay_left{
  width: 10px;
  height: 100%;
  position: absolute;
  z-index: 5;
  box-shadow: inset 3px -2px 5px 0px #000;
}
#shadow_overlay_bottom{
  width: 100%;
  min-height: 10px;
  position: absolute;
  bottom: 0%;
  z-index: 5;
  box-shadow: inset 0px -5px 9px 0px #000;
}
.threads {
  overflow-y: scroll;
  overflow-x: hidden;
}

注意我将溢出属性放在.threads容器而不是父容器上。这是因为你绝对定位的div也会滚动，并且不会填充它们各自的宽度/高度。

同样，您可以将阴影，背景图像或CSS渐变应用于阴影叠加div。

Answer 2

问题是子元素在父元素的堆叠上下文中更高。要使阴影显示，您需要使它们低于父级。

首先，您需要定位元素以使z-index适用，然后将z-index缩减为低于父级的值。例如

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

http://jsfiddle.net/7PhfJ/

或者当.threads已定位且box-shadow位于其父级时，您可以直接在该元素上添加z-index：

.threads {
    z-index: -1;
}

http://jsfiddle.net/7PhfJ/1/

Answer 3

你可以单独使用定位和盒子阴影，但浏览器支持会很差。我使用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>

使用position: sticky代替绝对，只要父级可见，.shadow将保留在其父级的顶部，因此我们使用父级的完整高度进行设置并偏移内容带有负边距以将其与父级的顶部对齐。 Sticky不会向下滚动内容，就像绝对定位的元素一样。

现在，您可以将插入框阴影设置为任意值，并使用pointer-events: none允许使用框阴影与图层后面的图层进行交互（因为具有更高z-index的定位元素将阻止您与他们背后的元素互动。）

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

再次 - 这是实验性的，浏览器支持缺乏地方，但证明你只能使用CSS。

Fiddle here ...

父级嵌入框阴影由子div重叠

3 个答案: