CSS : position : absolute div를 position : relative div 안에 넣는 방법 컨테이너에서 overflow : hidden에 의해 잘리지 않음

143

나는 3 레벨이 있습니다 div:

(아래 녹색) 상위 레벨 div로를 overflow: hidden. 상자 크기를 초과하면 해당 상자 내부의 일부 내용 (여기에는 표시되지 않음)이 잘 리기를 원하기 때문입니다.
(에서 아래 빨간색) 이 내부에서, 내가 가지고 div와 position: relative. 이를위한 유일한 용도는 다음 단계를위한 것입니다.
(아래 파란색) 마지막으로 div흐름을 제거 position: absolute하지만 div페이지 (페이지가 아닌) 빨간색을 기준으로 배치하려고 합니다.

파란색 상자를 흐름에서 꺼내고 녹색 상자 너머로 확장하고 싶지만 다음과 같이 빨간색 상자를 기준으로 배치하십시오.

그러나 아래 코드를 사용하면 얻을 수 있습니다.

그리고 position: relative빨간색 상자에서를 제거하면 이제 파란색 상자가 녹색 상자 밖으로 나갈 수 있지만 빨간색 상자와 관련하여 더 이상 배치되지 않습니다.

방법이 있습니까?

overflow: hidden녹색 상자를 유지하십시오 .
파란색 상자가 녹색 상자 너머로 확장되고 빨간색 상자를 기준으로 배치 되었습니까?

전체 소스 :

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

스 니펫 확장

css overflow css-position

— 애 버넷
소스

44

— 올바른

설명 : 따라서 파란색 상자 (가장 안쪽 div)가 녹색 상자 (가장 바깥 쪽 div)에서 넘칠 수 있지만 녹색 상자에서 오버플로를 숨기고 싶습니까? 기본적으로 녹색 상자를 제외한 녹색 상자의 모든 항목에 오버플로가 발생했습니다. 맞습니까?

— Anthony

앤서니, 맞습니다. 그리고 나는 빨간 상자 (# 2)에 무슨 일이 일어나는지 신경 쓰지 않습니다. 이것은 파란 상자 (# 3)의 위 / 오른쪽에 영향을 미칩니다.

— avernet

2

설명하기가 어렵다고 생각했지만 실제로 답변을 원했던 질문을 올바르게 설명해 주신 +1

— Andrew Mao

position: fixedoverflow:hidden포함하는 요소를 무시합니다 .

— Kevin Beal

48

작동하는 트릭은 position: absolute대신 상자 # 2를 배치하는 것입니다 position: relative. 우리는 일반적으로 position: relative내부 상자 (여기 상자 # 3)를 position: absolute외부 상자에 상대적으로 배치 하려고 할 때 외부 상자 (여기 상자 # 2) 에을 넣습니다 . 그러나 상자 # 3이 상자 # 2에 상대적으로 배치 되려면 상자 # 2 만 배치하면됩니다. 이 변경으로 우리는 다음을 얻습니다.

그리고이 변경 사항의 전체 코드는 다음과 같습니다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— 애 버넷
소스

5

실제로 사용 position: static했고 저에게 더 효과적이었습니다

— Jason

@Jason, 매우 흥미로운; 그래서 당신은 position: static대신 # 2 상자에 사용한다고 말하고 있습니다 position: absolute.

— avernet

1

왜 정교한 absolute클립하지 않지만 relative합니까?

— Andrew Mao

1

이 솔루션은 # 1과 # 3 사이의 모든 것을 절대적으로 만들지 않으면 작동하지 않습니다. 실제로는 불가능합니다.

— windmaomao 2016 년

1

그런 색을 사용하여 시각적으로 무언가를 설명하는 목적이 무엇인지 궁금합니다.

— ed1nh0

5

오버플로 숨겨진 컨테이너 외부에 무언가를 표시하는 마법의 해결책은 없습니다.

부모의 크기와 일치하는 절대 위치 div를 현재 상대 컨테이너 내부에 배치하여 비슷한 효과를 얻을 수 있습니다 (클리핑하지 않으려는 div는이 div 외부에 있어야 함).

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

x 축에 내용을 클리핑 해야하는 경우 (div 너비 만 설정했기 때문에 귀하의 경우 인 것처럼 나타남)을 사용할 수 있습니다 overflow-x: hidden.

— 바이스
소스

0

나는 이것을 그대로하는 방법을 실제로 보지 못한다. overflow:hiddendiv # 1에서 를 제거하고 div # 1 내에 다른 div를 추가하여 (예 : div # 2의 형제로) 지정되지 않은 '콘텐츠'를 유지 overflow:hidden하고 대신 에 div를 추가해야 한다고 생각합니다. 오버플로가 오버 라이드 될 수 있다고 생각하지 않습니다.

— 그래픽
소스

0

outer-div (녹색 상자) 안에 다른 내용이 표시되지 않으면 다른 div 안에 내용이 싸여 있지 않은 이유는 무엇입니까 "content"? 이 새로운 inner-div에는 오버플로가 숨겨 지지만 녹색 상자에는 오버플로가 표시됩니다.

유일한 문제점은 콘텐츠 div가 빨간색 상자의 위치를 방해하지 않도록 엉망으로 만들어야하지만 두통이 거의없이 해결할 수있는 것처럼 들립니다.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— 앤서니
소스