[CSS] 위치 속성으로 HTML 요소 배치하기(position 속성)

CSS에서 제공하는 속성 중에는 HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성이 있다.

이 속성들은 요소의 위치에 관여한다고 해서 위치 속성이라고 한다.

 

position 속성

position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용한다.

형식)
	position:<속성값>;

 

사용할 수 있는 속성값은 아래와 같다.

속성값	설명
s t a t ic	요소를 기본 흐름에 따라 배치한다.
r e l a t i v e	요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있다.
a b s o l u t e	요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치한다.
f i x e d	요소를 기본 흐름에서 벗어나 절대적인 좌쵸 위치에 따라 배치한다. 단, 스크롤해도 해당 위치에 고정되어있다.
s t i c k y	요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌쵸의 임계점에 이르면 fixed값처럼 화면에 고정된다.

 

- static

postion 속성값을 static으로 지정하면 아무런 변화가 없다. 좌표 속성을 사용할 수 없으며 위치 속성을 사용하지 않았을때와 같다. 

※위치속성을 사용하지 않았을때와 같은데 이러한 값이 존재하는 이유는 static과 같은 값이 기본값이기 때문이다.

 

 

---

 

- relative

position 속성값을 relative로 지정하면 요소를 좌표 속성에 따라 배치할 수 있다. CSS에서 사용할 수 있는 좌표속성은 아래와 같다.

속성명	설명
t o p	위쪽을 기준으로 좌표값을 지정한다.
r i g h t	오른쪽을 기준으로 좌표값을 지정한다.
b o t t o m	아래쪽을 기준으로 좌표값을 지정한다.
l e f t	왼쪽을 기준으로 좌표값을 지정한다.

 

좌표계는 요소가 웹 브라우저에 표시될 때 x축, y축, z축에 따라 요소가 배치되는 개념이다.

좌표계는 항상 좌표의 기준이 되는 기준점이 존재하는데

기준점은 각각 x축, y축, z축의 좌푯값을 쉼표로 구분해 순서대로 나열한 (0, 0, 0) 형태로 작성한다.

 

CSS 좌표계

 

position 속성값이 relative일 때는 기준점이 요소의 왼쪽 모서리가 된다.

예시를 통해 살펴보면 아래와 같다.

<style>
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:relative;
      left:100px;
      /* top:100px; */
    }
    .blue-box{
      background-color:blue;
    }
</style>

실행하면 위의 그림과 같이 나오는데 요소의 왼쪽 위 모서리가 기준점이고 여기에 left 속성값을 100px을 적용하므로

기준점의 좌푯값이 왼쪽을 기준으로 100px 이동되어 요소가 오른쪽으로 밀려나게 된다.

 

위의 코드에 top 속성을 추가하면

기준점이 위쪽을 기준으로 100px 이동해 요소가 아래로 밀려나게 된다. 

이처럼 position 속성값이 relative 로 지정된 요소는 원래 있던 위치(기준점)를 기준으로

좌표 속성에 따라 요소의 위치가 움직이게 된다.

 

 

---

 

- absolute

position 속성값을 absolute로 지정하면 relative와 마찬가지로 요소가 기본 흐름에서 벗어나 좌표 속성에 따라 배치된다.

relative일 때는 기준점이 요소의 왼쪽 위 모서리지만, absolute일 때는 웹 브라우저의 왼쪽 위 모서리다.

 

<style>
    body{
      margin:0;
    }
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:absolute;
      left:100px;
      /* top:100px; */
    }
    .blue-box{
      background-color:blue;
    }
</style>

body 태그의 margin 속성값을 0으로 지정하고 position 속성값을 relative에서 absolute로 바꾸면 전혀 다른 결과물을 볼 수 있다.

 

relative 값일 때는 요소가 이동하더라도 요소가 원래 위치에 있는 것 처럼 유지되지만

absolute 값일 때는 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식한다.

그래서 파란색 요소가 초록색 요소가 원래 있던 위치로 올라온다.

 

여기서 초록색 요소만 보면 이동한 위치가 position 속성값이 relative 일 때와 다르지 않는데  빨간색 옆으로 이동하지 않고

relative일 때 처럼 오른쪽으로만 이동한 이유는 position 속성값이 absolute일 때 top나 bottom 속성을 지정하지 않으면

left나 right 속성은 원래 위치에서 x축(가로) 방향으로만 움직이기 때문이다.

 

여기에 top 속성을 추가하면 아래와 같다.

실행결과를 보면 이전과 달라진 것이 없어보이나 실제로는 top 속성이 사용되어 기준점이 아래로 이동했다.

position 속성값이 relative일 때 같은 속성을 적용한 예제에서

초록색 요소가 파란색 요소 옆으로 내려간 것과 비교해보면 차이점을 알 수 있다.

 

 

---

 

- fixed

position 속성값을 fixed로 지정하면 해당 요소는 지정된 위치에 고정된다.

실행하면 absolute와 똑같이 작동하는 것 처럼 보이지만 스크롤했을 때 차이가 나타난다.

 

아래의 예시를 보면 이해할 수 있다.

 

코드를 실행해보면 fixed 값이 설정된 요소는 웹 브라우저를 스크롤하더라도 항상 같은 위치에 있음을 확인할 수 있다.

 

 

---

 

- sticky

position 속성값이 sticky일 때는 스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fiexd 값 처럼 작동한다.

<style>
    body{
      margin:0;
      height:4000px;
    }
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
    }
    .green-box{
      background-color:green;
      position:sticky;
      top:0;
    }
    .blue-box{
      background-color:blue;
    }
</style>

실행 결과를 보면 요소들이 static 값일 때처럼 표시된다. 그러나 웹 브라우저를 스크롤해 보면

화면에서 사라지는 빨간색과 파란색 요소와 다르게 초록색 요소는 top 속성값이 0인 위치에 고정되어있다.

 

 

---

 

- z-index 속성

z-index 속성을 사용하면 position 속성으로 배치한 요소의 z축 위치를 결정할 수 있다. 속성값으로는 하나의 정수값이 온다.

형식)
	z-index:<정수값>;

 

position 속성이 static 값이 아닐 때는 좌표 속성에 따라 요소를 배치할 수 있는데 이때 요소와 요소가 겹치는 문제가 발생할 수 있다.

<style>
    .box{
      width:100px;
      height:100px;
    }
    .red-box{
      background-color:red;
      position:relative;
      /* z-index:10; */ 
    }
    .green-box{
      background-color:green;
      position:absolute;
      left:0;
      top:0;
    }
</style>

코드를 실행하면 초록색 요소가 빨간색 요소보다 위에 표시된다.

position 속성은 다른 요소들이 배치되면 나중에 작성된 요소가 앞에 표시되어 그렇다. 

 

이때 요소들의 앞뒤 배치를 바꾸고 싶다면 z축 값을 지정하는 z-index 속성을 사용한다.

속성값의 숫자가 클 수록 요소가 더 앞쪽에 배치된다.

 

z축 값이 더 높은 빨간색 요소가 앞에 표시된다.