絕對定位在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。