[CSS 기초] 포지션 (position)

 

 

안녕하세요 PNcoding입니다 :)

 

오늘은 position 속성에 대하여 알아보도록 하겠습니다.

 

 

---

 

 

position 즉, 포지션이라는 속성은 이름 그대로 요소의 위치를 옮겨줄 때 사용하는 속성입니다.

기본적으로 top(위), bottom(아래), left(왼쪽), right(오른쪽)으로 위치를 옮겨줄 수 있습니다.

 

position의 속성값은 총 5가지가 있습니다.

• static :  기본값
• relative : 요소의 원래위치의 좌측상단을 기준으로 위치 옮기기 가능
• absolute : 요소를 브라우저 혹은 상위요소를 기준으로 위치 옮기기 가능
• fixed : 브라우저를 기준으로 위치 옮기기 가능, 화면이 바뀌어도 요소의 위치는 변경되지 않음
• sticky : 스크롤이 되었을 때 표현되는 방식이 다름

 

static을 제외하고 모든 속성값은 top, bottom, left, right로 요소의 위치를 지정해 줄 수 있습니다.

그럼 하나씩 보도록 하겠습니다.

 

 

position : static

position 속성이 적용되지 않았을 때는 기본값인 static 상태라고 생각하시면 됩니다.

기본값이라 굳이 적용시키지 않아도 됩니다.

top, bottom, left, right 속성을 적용시킬 수 없습니다.

 

 

position : relative

요소의 원래 위치를 기준으로 상대적인(relative) 위치를 지정할 수 있는 속성값입니다.

요소의 위치는 top, bottom, left, right 속성을 이용하여 요소의 원래위치를 기준으로 옮겨 줄 수 있습니다.

 

예를 들어 두 번째 박스의 position 속성값을 relative로 변경 한 다음 요소의 원래위치에서 top에서 50px, 왼쪽에서 100px 만큼 이동시켜 보도록 하겠습니다.

 

<div class="box box_1">박스1</div>
<div class="box box_2">박스2</div>
<div class="box box_3">박스3</div>

 

.box {
    width: 300px;
    height: 200px;
    font-size: 40px;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: coral;
    position: relative;
    top: 50px;
    left: 100px;
}

.box_3 {
    background-color: gold;
}

 

position: relative 적용 결과

 

위에 보시다시피 relative를 사용하면 요소의 원래 위치의 좌측상단을 기준으로 요소가 이동이 됩니다.

두 번째 박스가 옮겨진 만큼 세 번째 박스와 살짝 겹쳐진 것을 확인할 수 있습니다.

 

 

position : absolute

가장 난이도가 있는 속성값이라 볼 수 있습니다.

absolute라는 속성값은 static을 제외한 position 속성값을 가진 가장 가까운 부모태그를 기준으로 위치가 옮겨진다고 보시면 됩니다.

만약 가까운 부모태그에 position 속성값이 적용이 되어있지 않다면 가장 최상위부모인 body가 기준이 됩니다.

 

1) 최상위 body가 기준이 될 때

<div class="box box_1">박스1</div>
<div class="box box_2">박스2</div>
<div class="box box_3">박스3</div>

 

.box {
    width: 300px;
    height: 200px;
    font-size: 40px;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: coral;
    position: absolute;
    top: 50px;
    left: 100px;
}

.box_3 {
    background-color: gold;
}

 

position: absolute 적용 결과

 

첫 번째, 세 번째 박스는 기본값인 static 이 적용된 상태로 위치가 잡혀있으며 absolute가 적용된 두 번째 박스만 body를 기준으로 위치가 이동이 됩니다.

이렇게 두 번째 박스에게 position: absolute를 적용하게 된다면, 따로 독립적으로 움직인다는 것을 알 수 있습니다.

따라서 두 번째 박스는 브라우저의 좌측상단을 기준으로 top으로 50만큼, left로 100만큼 위치가 이동되어 있습니다.

 

 

2) 부모 요소가 기준이 될 때

두 번째 박스에게 부모가 존재할 때 부모요소에게 position속성값이 지정되어 있지 않다면 기본적으로 absolute가 적용된 두 번째 박스는 body를 기준점으로 잡습니다. (위의 첫 번째 결과랑 동일)

 

하지만, 부모요소에게 position 속성값이 적용되어 있을 때(static제외)는 부모요소를 기준으로 두 번째 박스가 위치가 잡힙니다.

<div class="out_box">
    <div class="box box_1">박스1</div>
    <div class="box box_2">박스2</div>
    <div class="box box_3">박스3</div>
</div>

 

.out_box {
    width: 800px;
    height: 600px;
    border: 5px solid gray;
    margin: 0 auto;
}

.box {
    width: 300px;
    height: 200px;
    font-size: 40px;
    position: relative;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: coral;
    position: absolute;
    top: 50px;
    left: 100px;
}

.box_3 {
    background-color: gold;
}

 

부모요소에게 position: relative가 적용되었을때

 

두 번째 박스가 부모인 out_box의 좌측상단을 기준으로 위치가 이동되어 있는 것을 확인할 수 있습니다. (top, left 속성을 사용했기 때문)

 

그러면 두 번째 박스를 부모요소의 오른쪽 하단으로 옮겨 보도록 하겠습니다.

위의 예제의 html, css는 동일하되, top과 left를 bottom, right로 수정해 보도록 할게요.

.box_2 {
    background-color: coral;
    position: absolute;
    bottom: 50px;
    right: 100px;
}

 

bottom, right 지정한 결과

 

부모요소의 우측 하단을 기준으로 두 번째 박스가 이동된 것을 확인할 수 있습니다.

 

어때요, 많이 어려워 보이나요?

 

하지만 보통은 자식요소에 absolute를 적용시킬 때는 자식요소의 가까운 부모요소를 기준으로 위치를 잡아주는 경우가 대부분(두 번째 경우)이라고 보시면 됩니다.

 

만약 어떠한 요소에게 position: absolute를 적용시켜줘야 한다면, 그 요소의 부모요소에게 position: relative를 적용시켜 주는 게 관례적이라 생각하시면 쉬울 거예요.

 

 

반응형

 

position : fixed

absolute와 동일하게 다른 요소들의 위치와 상관없이 이동이 되는 속성값입니다.

하지만 absolute와 다르게 항상 브라우저의 좌측상단이 기준점이 되며, 브라우저 창이 어디로 스크롤이 되더라도 항상 그 자리 그대로 고정되어 표시됩니다.

(부모요소에게 position이 존재하더라도 항상 브라우저가 기준점이 됨)

 

<div class="out_box">
    <div class="box box_1">박스1</div>
    <div class="box box_2">박스2</div>
    <div class="box box_3">박스3</div>
</div>

 

body {
    background-color: #dbdbdb;
    height: 2000px;
}

.out_box {
    width: 800px;
    height: 600px;
    border: 5px solid gray;
    margin: 0 auto;
    position: relative;
}

.box {
    width: 300px;
    height: 200px;
    font-size: 40px;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: coral;
    position: fixed;
    bottom: 50px;
    right: 100px;
}

.box_3 {
    background-color: gold;
}

 

두번째 박스의 위치가 브라우저의 우측 하단에 위치됨

 

두 번째 박스가 브라우저를 아래로 위로 스크롤 하도 브라우저를 기준으로 위치가 잡혀있는 것을 볼 수 있습니다.

이 fixed 속성값을 적용시키면 top 버튼, 문의하기 등 웹사이트를 사용하는 데 있어 사용자에게 계속 보여야 하는 요소를 브라우저 창에 삽입해 줄 수 있습니다.

 

 

position : sticky

이 속성값을 움직임이 특이하게 표현됩니다.

이 속성값을 적용시키면, 일정 기준점을 넘지 않았을 때는 relative처럼 표현되다가, 그 기준점을 넘기게 된다면 fixed처럼 표현됩니다.

 

말로 설명하는 것보다 직접 적어보는 게 이해가 더 되시겠죠?

 

<div class="wrap">
    <div class="out_box">
        <div class="box box_1">박스1</div>
        <div class="box box_2">박스2</div>
        <div class="box box_3">박스3</div>
    </div>
</div>

 

.wrap {
    width: 100%;
    background-color: #dbdbdb;
    height: 600px;
}

.out_box {
    width: 60%;
    height: 400px;
    border: 5px solid gray;
    margin: 0 auto;
}

.box {
    width: 100px;
    height: 100px;
    font-size: 20px;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: coral;
    position: sticky;
    top: 50px;
}

.box_3 {
    background-color: gold;
}

 

 

박스1

박스2

박스3

 

 

신기하게 표현되죠?

sticky를 적용시킨 두 번째 박스가 스크롤이 내려가다가 어느 순간 제자리에서 움직이지 않다가(끈적하게 붙어있다고 해서 sticky라고 표현) 스크롤이 더 내려가면 다시 사라지는 것을 확인할 수 있습니다.

 

이러한 sticky 효과를 넣어주면 신기한 움직임 때문에 사용자의 시선을 끌 수 있는 효과가 있습니다.

 

 

---

 

 

 

여기까지 해서 position의 속성값 5가지에 대하여 알아보았습니다.

 

일반적인 움직임과 다르게 표현되기 때문에 개념을 잘 알고 사용하시는 게 좋습니다 :)