显示受限于父元素的子元素

Question

假设我有一个按钮位于 div:

.parentDiv {
  width: 100px;
  height: 50px;
  background-color: #B9DEED;
}

.childButton {
  position: absolute;
  left: 90px;
  opacity: .5;
}

<div class="parentDiv">
  <button class="childButton">Childbutton</button>
</div>

渲染如下：

有没有办法显示按钮，使其限制在 div，即在“C”之后被截断？

Answer 1

您可以使用样式 overflow: hidden 隐藏父元素之外的所有内容。

但是，这不适用于 position: absolute 元素。为此，您需要使用 position. relative。

Answer 2

那不是位于 div 内的按钮，而是位于页面内的按钮（恰好是 div 的 child）。要在 div 中定位按钮，div 需要自行定位。

一旦parent有位置，overflow: hidden就会开始工作。

div {
  outline: 1px solid blue;
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
button {
  position: absolute;
  left: 90px;
}

<h3>Sample</h3>
<div>
  <button>Childbutton</button>
</div>

核心take-away：position总是与具有position的最近的祖先相关（不必是直接parent）。如果有none，则与页面相关。在 parent 上设置 position: relative 会建立一个参考框架，而无需将 parent 从文档流中移除。

如果在按钮上设置top: 10px，您可以看到不同之处。尝试在 div 上使用和不使用 position: relative 来验证参考系。

显示受限于父元素的子元素

Display child elements constrained to parent element

html

css

display