절대 위치 및 오버플로 숨김

절대 위치 및 오버플로 숨김

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

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>

외부 DIV를 절대 위치로 설정하지 않고 내부 DIV가 외부 DIV의 오버플로에 복종하도록 할 수 있는 가능성이 있습니까? (그로 인해 전체 레이아웃이 엉망이 될 것이기 때문입니다.)또한 테이블 TD에서 "성장"해야 하기 때문에 내부 DIV의 상대적 위치는 선택사항이 아닙니다.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>

다른 옵션은 없나요?

외부로 만들기<div>로.position: relative내면의<div>로.position: absolute당신에게 효과가 있을 겁니다.

어때position: relative외부 디브를 위해?내부를 숨기는 예에서.또한 위쪽 또는 왼쪽을 지정하지 않았기 때문에 레이아웃에서 이동하지 않습니다.

절대적으로 위치한 요소는 실제로 다음과 관련하여 위치합니다.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; 
}

확인하세요.

1. 부모 위치 상대적.
2. 부모가 너비와 높이를 수동으로 할당했습니다(절대 위치를 가진 자식 요소로서 중요).
3. 어린이 위치 절대;

.outer{
   position:relative;
   width:200px; 
   height:100px;
   overflow:hidden;
}

.inner{
   position:absolute;
   width:100px;
   height:100px;
   font-size:3rem;
}

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

}

방사형 배경 그라데이션으로 이 문제가 발생했습니다.위의 솔루션이 요소의 일부를 클리핑하는 경우 직접 상위 항목 대신 HTML 본문에 상대적인 위치를 적용합니다.

body {
  position: relative;
  overflow-x: hidden;
}

당신은 그냥 만듭니다.div다음과 같은 s:

<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