절대 위치 지정 및 오버플로 숨기기
P粉451614834
2023-08-21 19:30:21
<p>두 개의 DIV가 있는데, 하나는 다른 하나 안에 중첩되어 있습니다. 외부 DIV가 절대 위치로 설정되지 않은 경우 절대 위치의 내부 DIV는 외부 DIV의 오버플로 숨김을 따르지 않습니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#first {
너비: 200px;
높이: 200px;
배경색: 녹색;
오버플로: 숨김;
}
#두번째 {
너비: 50px;
높이: 50px;
배경색: 빨간색;
위치: 절대;
왼쪽: 250px;
상단: 250px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="first">
<div id="두 번째"></div>
<div id="세번째"></div>
<p><br /></p>
<p>외부 DIV를 절대 위치로 설정하지 않고 내부 DIV가 외부 DIV의 오버플로 숨김을 따르도록 할 수 있는 방법이 있습니까(이렇게 하면 전체 레이아웃이 손상될 수 있으므로)?
또한 테이블 TD를 "강조 표시"해야 하기 때문에 상대 위치 지정은 내부 DIV에 대한 옵션이 아닙니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#first {
너비: 200px;
높이: 200px;
배경색: 녹색;
}
#두번째 {
너비: 50px;
높이: 400px;
배경색: 빨간색;
위치: 상대;
왼쪽: 0px;
상단: 0px;
}</pre>
<pre class="brush:html;toolbar:false;"><table id="first">
<tr>
<td>
<div id="두 번째"></div>
</td>
</tr>
</table></pre>
<p><br /></p>
<p>다른 옵션이 있나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
외부 div 사용
position: relative은 어떻습니까? 내부 div를 숨기는 예입니다. top 또는 left가 지정되지 않았으므로 레이아웃 내에서 이동하지 않습니다.외부 변환
<div>设置为position: relative，将内部的<div>设置为position: absolute. 이것은 당신에게 도움이 될 것입니다.