오버플로 : 숨겨진 부모 외부에 자식을 표시

100

CSS에서는 overflow:hidden부동 자식의 높이로 확장 할 수 있도록 부모 컨테이너에 설정됩니다.

그러나 함께 결합하면 또 다른 흥미로운 기능이 있습니다 margin: auto...

PREVIOUS 형제가 부동 요소 인 경우 실제로 나란히 표시됩니다. 즉, 형제가 float:left있는 경우 컨테이너가 float:none overflow:hidden형제의 오른쪽에 나타나고 개행이 없습니다. 마치 정상적인 흐름에서 떠있는 것처럼 보입니다. 이전 형제가 있으면 float:right컨테이너가 형제의 왼쪽에 나타납니다. 이 컨테이너의 크기를 조정하면 플로팅 요소 사이의 중앙에 정확하게 표시됩니다. 당신은 이전의 두 형제, 하나가 있다면 말해 float:left, 다른 하나는 float:right, 컨테이너가 두 inbetween 중심으로 나타날 것이다.

그래서 여기에 문제가 있습니다 ...

자식을 마스킹하지 않고 그 유형의 레이아웃을 어떻게 유지합니까?

웹 전체에서 인터넷 검색을 clear:both하면 컨테이너를 확장하는 방법에 대한 방법이 제공 되지만 왼쪽 / 오른쪽 이전 자식 센터링을 유지하는 데 대한 대체 솔루션을 찾을 수 없습니다. 컨테이너 overflow:visible를 만들면 컨테이너가 갑자기 플로팅 요소의 레이아웃 흐름을 무시하고 플로팅 요소 위에 레이어로 표시됩니다.

그래서 질문 :

overflow:hidden레이아웃을 유지 하려면 컨테이너가 있어야합니다 ...

아이들이 가면을 쓰지 않도록 어떻게 만들 수 있습니까? 컨테이너 외부의 부모에 대해 절대적으로 자식을 배치해야합니다.

또는

overflow:visible컨테이너 외부의 부모에 상대적인 자식을 절대적으로 배치 할 수 있도록하려면 어떻게해야하나요?하지만 형제 플로트와 같은 레이아웃 흐름은 유지합니까?

— Marknadal
소스

86

를 사용하여 clearfix동일한 방법으로 "레이아웃 보존"을 수행 할 수 있습니다 overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

class="clearfix"부모 에 클래스를 추가 하고 제거overflow: hidden;

— Frexuz
소스

흠! 영리하다, 나는 지금 막 실험하고있다. 내가 현재 얻고있는 것은 생성 된 콘텐츠가 올바르게 동작하고 레이아웃의 흐름에서 보존되지만 부모는 여전히 그것을 무시하고 플로팅 요소 위에 레이어한다는 것입니다. 그러나 이것은 매우 좋은 아이디어이며 올바르게 작동하고 투표로 돌아올 수 있는지 확인하기 위해 더 많이 사용할 것입니다. 감사합니다 :).

— marknadal

@ user1671639 귀하의 예제는 실제로 clearfix에 적용되지 않습니다. 다른 것이 필요하므로 문제에 대한 질문을 게시하는 것이 좋습니다.

— Frexuz

이것은 전혀 같은 방식으로 작동하지 않습니다 overflow:hidden. 부모 div에 clearfix를 적용하면 모든 자식 구성 요소가 부모와 동일한 높이에 "포함"되는 것을 허용하지 않습니다.

— Khom Nazid

11

게시 된 답변 중 어느 것도 나를 위해 일하지 않았습니다. position: absolute그러나 자식 요소에 대한 설정 은 작동했습니다.

— 반사
소스

18

그러나 부모 DIV가 (overflow : hidden이있는) 부모 DIV의 경계를 넘어 가면 그것을 마스킹하지 않을까요?

— marknadal

9

Afaik은 부모가 position : relative가없는 한 그렇지 않습니다. 그런 다음 자식은 첫 번째 (정적이지 않은) 조상 요소를 기준으로 배치되어 일반 (부모의) DOM 흐름에서 제거됩니다.

— Pim Schaaf 2013

부모에 position : relative가 있고 필요하지 않은 경우 position : unset으로 만들 수 있습니다.

— yeahlad

사실, 를 가진 부모 외부에position: fixed 상대적인 위치이거나 절대 위치 이면 표시됩니다. 그러나 코드 변경에 더 견고하게하려면 부모를 기준으로 배치해야하는 경우가 많습니다. 그렇다면 이러한 솔루션은 대안이 아닙니다. visibility: hidden

— ArneHugo

10

이것은 오래된 질문이지만 직접 만났습니다.

이전 질문 ( "Children visible in overflow : hidden parent")에 대해 상황에 맞는 반 솔루션이 있습니다.

상위 div가 position : relative 일 필요가없는 경우 하위 스타일을 visible : visible로 설정하면됩니다.

부모 div가 position : relative 여야하는 경우 자식을 표시 할 수있는 유일한 방법은 position : fixed였습니다. 이것은 내 상황에서 운 좋게도 나를 위해 일했지만 다른 사람들에게는 작동하지 않을 것이라고 상상할 것입니다.

다음은보기 위해 html 파일에 게시하는 엉뚱한 예입니다.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

— 토마스 데이비스
소스

다음은보기 위해 html 파일에 게시하는 엉뚱한 예입니다. <code> <div style = "background : # ff00ff; overflow : hidden; width : 500px; height : 500px; position : relative;"> <div style = "background : # ff0000; position : fixed; top : 10px; left : 10px; "> asd <div style ="background : # 00ffff; width : 200px; overflow : visible; position : absolute; visibility : visible; clear : both; height : 1000px; top : 100px; left : 10px; "> a </ div> </ div> </ div> </ code>

— Thomas Davis

4

답변 해주셔서 감사합니다.하지만 고정 된 위치가 뷰포트를 기준으로 요소를 자동으로 배치하기 때문에 작동하지 않습니다. 즉 , 부모와 함께 이동 하지 않습니다 . 실제로 스크롤 페이지가있는 경우 스크롤 할 때 10px, 10px로 유지됩니다.

— marknadal

"부모 div가 position : relative 여야한다면 자식을 표시 할 수있는 유일한 방법은 position : fixed였습니다." 감사합니다. 부모에게 넘침이 있음에도 불구하고 넘쳐 야 할 팝업 도움말 풍선이 있습니다. 나는 상대적인 내부와 고정 된 콘텐츠 영역이있는 절대 div를 갖게되었습니다.

— JackMorrissey 2015 년

고마워요. 나는 상대적 위치를 가진 부모가 있었고 그 위치가 left. margin-left대신 사용 하면 동일한 효과를 얻을 수 있으므로 더 이상 위치 상대를 사용할 필요가 없습니다.

— Felipe Castro

1

다른 경우, clearfix가이 문제를 해결하지 못하는 경우 부동 형제의 너비와 동일한 부동 형 형제에 여백을 추가하십시오.

— Walf
소스