CSS position absolute 속성

안녕하세요 저번에 봤던 relative 속성에 이어 이번에는 absolute 속성에 관해 알아보도록 하겠습니다.

position:relative 속성 알아보기

position 속성으로 세번째 속성은 absolute입니다.

이 값은 static이 아닌 위치값을 가지는 첫번째 부모의 상대적인 위치에 배치됩니다.

문서의 흐름과는 무관하게 원하는 위치에 배치가 가능하며, 자식의 요소를 position:absolute로 지정하고 부모요소를 position:relative지정하면 부모의 위치 지정에 따라 자식요소를 배치할 수 있습니다.

네번째 속성으로는 fixed 입니다.

이 값은 브라우저 윈도우에 상대적인 고정위치에 배치되며 position:fixed로 하면 무조건 body에 고정됩니다.

position:absolute 의 부모를 position:relative 로 하게 되면 부모에 따라서 움직이지만

position:fixed로 하면 무조건 고정됩니다.

예시는 이쪽을 보고 확인해주세요 본문에 삽입하여 배치를 하였더니 화면이 깨지는군요

이런 것을 원했는데 예시문을 보면서 브라우저를 움직여 보세요. 예시문

소스를 가지고 해보실분을 위해

◆ html 코드 ◆

<div class="box5">fixed box</div>

</div>

◆ css 소스 ◆

#wrap{width:500px; height:500px; background-color:gray;

margin:0 auto; position:relative; }

.box1{background-color:red; position:absolute; left:0; top:0;}

.box2{background-color:green; position:absolute; left:100px; top:0; z-index:3}

.box3{background-color:blue; position:absolute; left:0; top:100px; z-index:3}

.box4{background-color:yellow; position:absolute; left:100px; top:100px;}

.box5{background-color:black; position:fixed; left:50px; top:50px; color:white;}

#wrap div{width:100px; height:100px;}

위 소스를 살펴보다보면 z-index 가 나옵니다.

position 속성은 엘리먼트가 겹치는 문제가 있습니다. 정상적인 흐름대로 등장하여 자리를 배치하면 별문제가 없지만 엘리먼트 위치를 강제로 옮기면 다른 엘리먼트와 겹치는 경우가 있습니다.

이때 우선 순위에 따라 아래쪽 엘리먼트가 수직적인 우선 순위에 따라 아래쪽 엘리먼트가 위쪽 엘리먼트에 가려집니다.

z-index 속성은 엘리먼트의 수직 위치를 지정하고 z-index 가 작을 수록 먼저 등장한 것으로 취급되어 아래쪽에 깔리고 높을 수록 위에 배치 됩니다.

codus