时间戳

首页 > 解决方案 > 如何用子元素覆盖设置了“边框和溢出隐藏”的元素的边框

html - 如何用子元素覆盖设置了“边框和溢出隐藏”的元素的边框

问题描述

我写了这么一段代码，但是指定子元素position: absolute的边框并没有和父元素的边框重叠。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lists {
  position: relative;
  overflow: hidden;
  height: 60px;
  border-top: 15px solid green;
}

.list {
  position: absolute;
  top: -15px;  /* .items border width */
}

.items+.items {
  border-left: 1px solid white;
}

.items {
  float: left;
  width: 20vw;
  height: 60px;
  border-top: 15px solid black;  /* overlap this border! */
  background: red;
}
<div class="lists">
  <ul class="list">
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
  </ul>
</div>

根据 W3C的说法，溢出隐藏认为存在隐藏边界的可能性。

该值表示该框的内容被剪切到其填充框内，并且UA不得提供任何滚动用户界面来查看剪切区域之外的内容，也不允许通过用户直接干预进行滚动，例如在触摸屏上拖动或使用鼠标上的滚轮。

实际上，当我删除溢出时，我得到了理想的行为。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lists {
  position: relative;
  /* this property removed overflow: hidden; */
  height: 60px;
  border-top: 15px solid green;
}

.list {
  position: absolute;
  top: -15px;  /* .items border width */
}

.items+.items {
  border-left: 1px solid white;
}

.items {
  float: left;
  width: 20vw;
  height: 60px;
  border-top: 15px solid black;  /* overlap this border! */
  background: red;
}
<div class="lists">
  <ul class="list">
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
  </ul>
</div>

但是，我想设置溢出：隐藏。这个问题是由溢出属性引起的吗？如何解决这个问题？提前致谢...

标签： htmlcsscss-position

解决方案

这似乎有效：https ://jsfiddle.net/04wzq396/2/

问题是，如果您对同一元素使用position和overflow属性，则只能将子元素弹出其边界之外position: fixed;（相对于视口）。position: absolute;以类似的方式工作，但它相对于其第一个定位的祖先放置元素。

所以这里的解决方案是为溢出的元素添加一个容器并将位置属性移到那里。如果随后top将元素的属性.list从 -15 增加到 0，则绿色边框将不再可见。

推荐阅读