Question

我有一个非常具体的要求，即父div与absolute:position和孩子div与absolute position和父div我有overflow:hidden因此，width的额外div隐藏了，但这不起作用，我知道父div必须与position:relative匹配，但是根据我的代码的当前结构，我无法将父div position从absolute更改为relative，只是想知道是否有办法处理此问题？ / p>

以下是JSfiddle示例，我希望浅红色框隐藏在父div下，以便子div位于父级内。

这是我的代码

＆＃13;

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
}
.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

＆＃13;

<div class="wrapper">
  <div class="wrapper-inner">
    Content goes here
  </div>
</div>

＆＃13;

Answer 1

您似乎错过了在overflow:hidden课程中添加wrapper。

＆＃13;

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;}
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}

＆＃13;

<div class="wrapper">
	<div class="wrapper-inner">
    	Content goes here
    </div>
</div>

＆＃13;

Answer 2

根据您的要求检查此代码：

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden;
}

Answer 3

请查看我的fiddle

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;}
.wrapper-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}

<div class="wrapper">
	<div class="wrapper-inner">
    	Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here
    </div>
</div>

Answer 4

除非我误解了您的要求，否则您不希望看到子div延伸到父div之外。你提到过overflow:hidden，但实际上并不存在于你的小提琴中。将它添加到.wrapper类似乎完成了我认为您的要求。

Answer 5

DEMO

CSS

.wrapper-inner {
  position: absolute; /* positioned wrt it parent */
  top:10px; /* account for 10px padding in parent */
  bottom:10px;
  left:10px;
  right:10px;
  /* width: 450px;
  height: 380px; */
  background: #fecccc;
}

Answer 6

您错过了父包装中的 overflow:hidden ：

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden
}

.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

简而言之，您已回答了自己的问题！：）

父div在绝对位置隐藏的溢出

6 个答案: