position

div {border:1px solid red;box-sizing:border-box;width:200px; height:200px;}
div:nth-child(2) {position:absolute; left:100px; top:50px;}
div:nth-child(3) {position:relative; left:100px; top:50px;}
div:nth-child(3) div {position:absolute; left:100px; top:50px;}
div:nth-child(4) {position:fixed; left:300px; top:300px;} /*  화면의 좌표 사용하여 화면에 고정, 광고 배너 등 따라 오는 것 표현 */

 

<title>마진 겹침 현상 방지법</title>

.wrap {border:1px solid red;
width:800px;
margin:20px auto;

}
p {border:1px dashed blue; text-align:center; height:100px;box-sizing:border-box;float:left;}

p:nth-child(1) {width:50%;}
p:nth-child(2) {width:50%;}
p:nth-child(3) {width:100%;}
.wrap:nth-child(1) {height:200px;} /* 부모에게 높이 값 */

.wrap:nth-child(2) {font-size:0;}
.wrap:nth-child(2) p {float:none;display:inline-block;font-size:16px;}

.wrap:nth-child(3) {overflow:hidden;}

<div class=”wrap”>
<p></p>
<p></p>

<p>부모에게 높이 값을 지정<br> 단점:높이 값 고정, 유동적인 레이아웃으로 이용할 수 없음
</p>

</div>

<div class=”wrap”>
<p></p>
<p></p>

<p>flaot대신 인라인블럭 사용<br>
콘텐츠에 따라 위 아래로 움직임/ 높낮이 맞추기가 힘듦
</p>

</div>

<div class=”wrap”>
<p></p>
<p></p>

<p>부모에게 오버플로우 히든</p>

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.