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

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.