절대 위치 및 오버플로 : 숨김

Question

<div id="parent" style="overflow:hidden; position:relative;"> 
    <div id="child" style="position:absolute;"> 
    </div> 
</div> 

부모 요소보다 크지 만 오버플로를 제거하지 않고 자식 요소를 표시해야합니다. 이것이 가능한가? 부모 요소의 길이가 position:relative; 입니다. 부모 요소 테두리에서 벗어나면 자식 요소가 제거됩니다.

항상 가능한 가장 작은 크기로 추가합니다 폭을 자동으로

* {margin: 0; padding: 0;} 

#parent {width: auto; overflow: hidden;} 

#child {position: absolute; width: auto;} 

...

Answer 1

대신 당신은 여분의 아이 div을 소개하고 그에게 overflow: hidden를 이동할 수 있습니다 .. 상위 div에 모두 overflow: hidden 및 position: relative으로 원하는 것을 완전히 불가능하다.

참조 : http://jsfiddle.net/thirtydot/TFTnU/

HTML :

<div id="parent"> 
    <div id="hideOverflow"> 
     <div style="width:1000px;background:#ccc">sdfsd</div> 
    </div> 
    <div id="child">overflow "visible"</div> 
</div> 

CSS : clearfix 숨겨져 :

#parent { 
    position:relative; 
    background:red; 
    width:100px; 
    height:100px 
} 
#child { 
    position:absolute; 
    background:#f0f; 
    width:300px; 
    bottom: 0; 
    left: 0 
} 
#hideOverflow { 
    overflow: hidden 
} 

Answer 2

CSS를 사용 (요소 추가 CSS를 정의한 난 그냥 넣어 스타일은 명료 속성); 리셋을하면 자연의 흐름을 유지하는 데 도움이됩니다.

그러나 자녀가 부모보다 더 커지면 불가능합니다. 그러나이 CSS를 사용하면 가능한 최대의 것을 얻을 수 있다고 생각합니다.

Answer 3

내가 일반적으로 오버 플로우 사용합니다. 이 경우에는 포기하고 추가 div를 추가합니다.

<div id="parent" style="position:relative;"> 
    <!-- floating divs here --> 
    <div id="child" style="position:absolute;"></div> 
    <div style="clear:both"></div> 
</div> 

Answer 4

아래 코드는 매력처럼 작동합니다.

<div id="grandparent" style="position:relative;"> 
    <div id="parent" style="overflow:hidden;"> 
     <div id="child" style="position:absolute;"> 
     </div> 
    </div> 
</div> 

Answer 5

thirtydot의 솔루션은 실제로 좋은 아이디어입니다.

여기 명확한 예제 : http://jsfiddle.net/y9dtL68d/

HTML

<div id="grandparent"> 
    <div id="parent"> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
    </div> 
    <div id="child"> 
     dudes 
    </div>  
</div> 

CSS

#grandparent { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    margin: 20px; 
    background: #d0d0d0; 
} 
#parent { 
    width: 150px; 
    height: 150px; 
    overflow:hidden; 
} 
#child { 
    position: absolute; 
    background: red; 
    color: white; 
    left: 100%; 
    top: 0; 
}