css - “绝对”位置元素在放置在父级范围之外时不显示？

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; 是一个诀窍，因为这将删除滚动条......并且由于子元素的定位在父元素的边界之外，这将使子元素看起来隐藏在 View 之外。