当放置在父级范围之外时，“绝对”位置元素不会显示吗？

Question

如何获得一个子div，该子div的位置绝对不会出现在其父级的范围之外？

https://jsfiddle.net/knp9ebys/9/

.papa {
  background:red;
  overflow:auto;
  width:90px;
  height:90px;
}

.baby {
  position:absolute;
  top:100px;
  left:100px;
  width:25px;
  height:25px;
  background:blue;
  color:white;
}

Answer 1

尝试一下：

.papa {
  background:red;
  overflow:auto;
  width:90px;
  height:90px;
  position:relative; /* add this line */
  overflow:hidden; /* add this line */
}

.baby {
  position:absolute;
  top:100px;
  left:100px;
  width:25px;
  height:25px;
  background:blue;
  color:white;
}

如果将position:relative;添加到父元素，则子元素可以放置在父元素的上下文中。添加overflow:hidden;是诀窍，因为这将删除滚动条...并且由于子元素的位置在父元素的边界之外，因此它将使子元素看起来对视图而言是隐藏的。