[HTML / CSS] Position 속성 - relative 와 absolute

devCecy·2020년 11월 13일

CSS position style

HTML / CSS

목록 보기

2/9

1. Position 속성

css의 position 속성 중 relative와 absolute의 차이를 알아보자!

이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다.

1) static

static은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static 상태다. 그러므로 우리가 position: stactic;이라고 적어줄 일은 없다. position 속성을 갖지 않은 버튼을 하나 만들어보자.

/*position 속성을 부여하지 않은 버튼*/
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
        }

그럼, 아래와 같은 버튼이 생성된다. 이미지의 선은 브라우저 상단을 보여주기 위해서 같이 캡쳐했다. 어떤 값도 부여해주지 않았음에도 버튼과 브라우저 사이에 약간의 여백이 있음을 알 수 있다. 이게 모든 태그들이 static 상태에 있다는 증거!

2) relative

버튼의 위치를 바꿔 여백을 좀 주고싶다면 이제 position: relative;가 등장할 차례다. relative는 static이었을때의 위치를 기준으로 값을 갖게된다.

/*position: relative속성을 부여하고 top: 100px; 로 지정해 주었다.*/ 
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }

역시나 상단 브라우저창을 함께 캡쳐했다. btn1은 static 상태에서 top: 100px; 만큼 이동했다.

3) absolute

absolute는 static속성값에 구애 받지 않고 요소를 위치시킬 수 있다.

/*position: absolute;  top: 100px을 부여해준 버튼 */
.btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }

btn2에position: absolute; top: 100px;값을 부여해주었다. 그럼 아래와 같이 브라우져 상단에서부터 100px떨어진 곳에 버튼이 위치하게 된다.

relative와 absolute 비교

따로 보니 relative top: 100px; 인 버튼과 absolute top:100px인 버튼의 위치 차이를 느끼기 어려워 동시에 만들어 보았다.
btn1에는 position: relative; top: 100px;, btn2에는 position: absolute; top: 100px;을 부여해 주었다.

       .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }
        .btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }