5

我遇到了一个问题，即子 div 与父框阴影底部重叠。

父级具有带溢出-y 的最大高度：滚动。任何帮助都会很棒！

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

3 回答 3

10

不，您所要求的可以很容易地完成。但是，为方便起见，我建议使用背景图像或 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 也会滚动，并且不会填充它们各自的宽度/高度。

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

于 2013-05-22T00:27:57.397 回答
1

您可以单独使用定位和 box-shadow 来完成，但浏览器支持会很差。我用过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而不是absolute，.shadow只要父级可见，就会一直停留在其父级的顶部，因此我们将其设置为父级的全高，并以负边距偏移内容以使其与父级的顶部对齐. Sticky 不会像绝对定位元素那样随着内容向下滚动。

您现在可以将 inset box-shadow 设置为任何值，并用于pointer-events: none允许与具有 box-shadow 的层后面的层进行交互（因为具有较高 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 来做到这一点。

在这里摆弄...

于 2015-02-27T13:36:10.977 回答
0

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

首先，您需要定位要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/

于 2013-05-22T00:15:11.770 回答