父级嵌入框阴影与子div重叠 [英] Parent inset box-shadow overlapped by children divs

问题描述

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

I am having an issue where the children divs are overlapping the parents box-shadow bottom.

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

The parent has a max-height w/ overflow-y: scroll. Any help would be great!

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

推荐答案

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

No, what you're asking can be done quite easily. However, for ease I would advise for using a background-image or a CSS gradient instead of inset box-shadows. You'll have to tweak the CSS a bit to get exactly what you wanted. (for example to make sure the bottom overlay doesn't cover the bottom arrow of your scrollbar).

在子元素上设置z-index只会如果您只有静态文本和图像显示，没有链接或交互式内容，请工作。你也不允许为父母设置背景，或者它会隐藏孩子。

要实现这一点，你需要分开2个阴影叠加div，并将它们绝对放在父容器中。你的结构是这样的：

To achieve this, you need to make 2 separate shadow overlay divs, and position them absolutely in a parent container. Your structure will be like this:

• 父容器
  
  
  
  • 阴影叠加左
  
  
  • 阴影叠加底部
  
  
  • Threadcontainer （在此div上设置溢出）
    
    
    
    • 主题
    
    
    • 主题
    
    
    • Parent container
      • Shadow overlay left
      • Shadow overlay bottom
      • Threadcontainer (overflow is set on this div)
        • Thread
        • Thread

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

        Here is a working demo: 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也会滚动，并且不会填充它们各自的宽度/高度。

        Notice I put the overflow properties on the .threads container instead of the parent container. This is because else your absolutely positioned divs will scroll too, and will not fill their respective widths/ heights.

        再次，你可以应用bo​​x-shadow，一个背景图像或者你的阴影叠加div的CSS渐变。

        Again, you can apply box-shadow, a background-image or CSS gradients to your shadow overlay divs.

        这篇关于父级嵌入框阴影与子div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！