Question

我编写了这样的代码，但是指定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>

According to 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>

但是，我要设置溢出：隐藏。此问题是由溢出属性引起的吗？如何解决这个问题？预先感谢...

Answer 1

这似乎可行：https://jsfiddle.net/04wzq396/2/

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

因此，这里一个解决方案是增加一个容器，则溢出的元件和移动的位置属性那里。然后，如果您将top元素的.list属性从-15增加到0，则绿色边框将不再可见。

如何使用子元素覆盖其“边框和溢出隐藏”元素的边框

1 个答案: