CSS에서 Postion속성으로 데이터(섹션)을 원하는 위치에 배치할 수 있다.
Position 속성의 속성값으로는 static, relative,absolute,fixed, sticky가 있다.
기본값은 static이며, 주로 사용되는 속성값은 relative,absolute, fixed 이다.
relative, absolute, fixed에 대해 알아보자
기본세팅
# test.html
... 생략 ...
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body># style.css
.box:nth-child(1) {
background-color: red;
width: 100px;
height: 100px;
color: white;
}
.box:nth-child(2) {
background-color: yellow;
width: 100px;
height: 100px;
color: black;
}
.box:nth-child(3) {
background-color: green;
width: 100px;
height: 100px;
color: white;
}
.box:nth-child(4) {
background-color: blue;
width: 100px;
height: 100px;
color: white;
}
relative
position: relative;
요소를 일반적인 문서 흐름에 따라 배치하고, 자기자신을 기준으로 top, right, bottom, left 값에 따라 offset을 적용한다.
.box:nth-child(2) {
position: relative;
top: 10px;
left: 20px;
}
2번 box의 원래위치를 기준으로 top에서 10px left에서 20px offset된 위치로 이동한다.
relative의 경우 offset이 다른 요소에 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 동일하다.
absolute
position: absolute;
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치한다. 단, 부모 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 최종위치는 top, right, bottom, left 값이 지정한다.
.box:nth-child(3) {
position: absolute;
}
.box:nth-child(4) {
background-color: blue;
width: 120px;
height: 120px;
color: white;
}box 3의 position값을 absolute로 설정하고, 확인을 위해 box 4의 크기를 width, height 120px로 조정하였다.
box 3의 경우 위치지정 부모요소가 없기 때문에 초기 컨테이닝 블록에 위치하게되고, position속성이 absolute값을 갖게됨에 따라 페이지 레이아웃에서 배정된 공간이 없어졌다. 따라서 box 4가 기존의 box3의 자리에 위치하게 되었음을 확인할 수 있다.
top과 left 값을 입력해보자
.box:nth-child(3) {
position: absolute;
top: 10px;
left: 20px;
}
미묘하게 1번 박스와 상단 높이차이가 발생했고, 2번 박스와 마찬가지로 left:20px 임에도 차이가 난다는 것을 확인할 수 있다.
3번 위치가 미묘하게 1번과 2번 박스와 차이나는 것에서 위치기준점이 다르다는 사실을 추측할 수 있다.
확인을 위해 테스트해보자
개발자도구를 통해 전체 body의 margin 값이 8px로 설정되어있음을 확인하였다.
이제 3번 박스의 top offset값을 10px 대신 8px를 주고 1번 박스와 위치를 비교해보자.
테스트를 통해 position: absolute; 에서 부모태그중 위치지정값이 없을 경우, body를 위치기준점으로 잡고 이때 body의 margin 값은 무시된다는 사실을 확인하였다.
그렇다면, body말고 다른 부모태그를 넣으면 어떻게 될까.
부모요소 div class="wrap" 을 추가하여 확인해보자.
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
특별한 변화는 없다. 이번에는 wrap에 margin을 입력해보자.
.wrap {
margin-top: 30px;
}
변화가 확인되었다.
position을 absolute로 지정한 3번 박스를 제외하고 모두 margin-top:30px가 적용되었다.
정리해보면 position: absolute; 속성은
1) 페이지 레이아웃에서 차지하는 공간이 배제된다. (다른요소와 서로 간섭하지 않는다)
2) 부모태그중 postion 속성이 없다면, 페이지 최상단 좌측점을 위치기준점으로 삼는다.
부모태그중 position 속성값을 갖는 경우 해당 태그의 기준점을 위치기준점으로 삼는다.
fixed
position: fixed;
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 예시를 보자.
.box:nth-child(4) {
position: fixed;
top: 20px;
}
페이지 스크롤을 위해 body tag의 height값을 입력하고 확인해보자.
첨부와 같이 스크롤을 이동해도 fixed로 설정된 4번 박스는 움직이지 않고 고정된 위치에서 지속적으로 나타난다는 것을 확인할 수 있다.
