html - 由子 div 重叠的父插入框阴影

Question

我遇到了子 div 与父 box-shadow 底部重叠的问题。

父级有一个最大高度 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。您也不能为 parent 设置背景，否则会隐藏 child 。

为此，您需要制作 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。