절대 위치 및 오버플로 숨김

절대 위치 및 오버플로 숨김

---

우리는 두 개의 DIV를 가지고 있는데, 하나는 다른 하나에 내장되어 있습니다. 외부 DIV가 절대 위치에 있지 않으면 절대 위치 인 내부 DIV는 외부 DIV에 숨겨진 오버 플로우 ( 예 :)에 따르지 않습니다 .

외부 DIV를 절대 위치로 설정하지 않고 내부 DIV가 외부 DIV에 숨겨져있는 오버플로에 영향을 줄 수있는 기회가 있습니까? 또한 테이블 TD ( exmple ) 에서 "확장"해야하므로 내부 DIV에 대한 상대 위치는 옵션이 아닙니다 .

다른 옵션이 있습니까?

---

외부 확인 <div>을 position: relative하고 내부 <div>에 position: absolute. 당신을 위해 작동합니다.

---

무엇에 대한 position: relative외부 DIV 하시나요? 내부를 숨기는 예입니다. 또한 상단 또는 왼쪽을 지정하지 않기 때문에 레이아웃에서 이동하지 않습니다.

---

절대 위치 요소는 실제로 relative부모 또는 가장 가까운 발견 된 상대 부모 와 관련하여 배치 됩니다. 따라서 요소 overflow: hidden는 사이에 relative있고 absolute요소 사이에 있어야합니다 .

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

---

당신 div은 이것을 다음과 같이 만듭니다 :

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

이 코드가 도움이되기를 바랍니다. :)

참고 URL : https://stackoverflow.com/questions/4605715/position-absolute-and-overflow-hidden