绝对定位在div和溢出

Question

假设我在OuterDiv中有OuterDiv的未知大小和InnerDiv 10px x 10px。我想要实现的是InnerDiv在OuterDiv（简单部分）内的绝对定位，所以位置（0,0）表示OuterDiv的左上角和（硬部分）位置（-5,0）意味着只有右半部分的InnerDiv是可见的（溢出的部分是隐藏的）。有任何想法吗？

Answer 1

您必须使用overflow: hidden css属性。 下面的代码片段适合你吗？

<div id="outer" style="position: relative; overflow: hidden;"> 

    <div id="inner" style="height: 10px; width: 10px; display: block; position: absolute; top: 0; left: -5px; background: #f00;"> 

    </div> 

</div> 

Answer 2

您只需用left: -5px外部部件上应用overflow: hidden和定位内部元件像这样：

#outer { 
    height: 200px; /* Must give explicit height since contents are absolute */ 
    position: relative; 
    overflow: hidden; 
} 

#inner { 
    height: 10px; 
    width: 10px; 
    position: absolute; 
    top: 0; 
    left: -5px; 
} 

工作示例的Here's a gist。