html - 剪切包含在另一个 div 中的 div 的顶部和左侧

Question

对于嵌套的 div，我想剪裁顶部和左侧以使内部 div 居中。

<div>
<div style="position: relative; top: -160px; left: 10px; width: 400px; height: 400px; overflow: hidden;">
<!-- div>
<div style="width: 686px; height: 600px; overflow: hidden;" -->
<IFRAME SRC="http://www.aol.com/" FRAMEBORDER="0" BORDER="0" ID="slpane" width="900px" height="900px"></iframe> 
</div>
</div>

top 和 left 为负数似乎将内部 div 置于包含 div 的顶部和左侧。如何在剪裁顶部和左侧时保持 div 嵌套？

Answer 1

将overflow:hidden添加到带有负top的元素的父元素。

fiddle :http://jsfiddle.net/VZ3gt/

<div style="overflow:hidden;">
<div style="position: relative; top: -160px; left: 10px; width: 400px; height: 400px; overflow: hidden;">
<!-- div>
<div style="width: 686px; height: 600px; overflow: hidden;" -->
<IFRAME SRC="http://www.aol.com/" FRAMEBORDER="0" BORDER="0" ID="slpane" width="900px" height="900px"></iframe> 
</div>
</div>