HTML/CSS - position 이란?

HTML/CSS - position 이란?

 

 

 

 

 

CSS 에서 중요한 속성인 position 에 대해 알아보자.

 

position은 말 그대로 화면에 어떻게 배치할지를 정해주는 요소 이다.

 

우리가 이 position 요소에 배치에 대한 속성값을 주는 것을 포지셔닝이라 한다.

 

 

기본적으로 HTML 요소들은 position : static 속성을 기본적으로 갖는다.

 

position : staic 은 원래 있어야하는 위치에 그대로 배치하는 것으로 

 

포지셔닝이 안되어있다고 말한다.

 

 

그렇다면, 포지셔닝이 되어있다라는 것은 무엇을 말할까?

 

 

포지셔닝에는 여러가지 종류가 있다.

 

relative

fixed

absolute

sticky

 

이렇게 있는데 하나씩 봐보자.

 

 

 

------------------------------------------------------------------------------------------------------------------------------

 

 

1. position : relative; 

 

우선 relative는 원래있어야하는 곳을 기준으로 배치를 한다.

 

예를 들어 padding: 50px; margin: 30px; 을 준다고 하였을때, 

 

이 padding 과 margin 을 주는 기준요소는 원래 있어야하는 staic을 기준으로 움직이게 된다.

 

 

 

 

2. position : fixed; 

 

 

fixed 는 말그대로 고정된 값을 가진다.

 

이는 스크롤을 내렸을때도 고정되어있으며,

 

 

 

 

 

↓

 

 

 

 

 

 

이렇게 스크롤을 내려도 그 자리에 고정되어있다. (header 값에 position : fixed; 속성을 주었다.)

 

예시와 같이 navigation bar에 가장 많이 쓰인다.

 

fixed는 요소들에 기준을 주지 않고 웹브라우저 창에 기준을 준다.

 

그러므로 다른 요소들과는 별개로 배치를 가진다.

 

주의 할 것은 다른요소들과 배치가 별개로 들어가므로 navigation 에 속성값을 주게되면 navigation 뒤로도 요소들이 배치되어 육안으로 안보이게 될 수도 있다는 점을 알아두자.

 

 

 

3. position : absolute;

 

absolute 속성은 가장 가까이에 포지셔닝 되어있는 부모 요소를 기준으로 배치된다.

 

앞에서 설명했던것처럼 staic 속성값을 가진 요소들은 포지셔닝이 되어있지 않다 라고 간주하여 기준이 될 수 없다.

 

기준이 되는 속성값은 relative, fixed, absolute, sticky 이다.

 

가장 가까운 부모요소중에 이 포지셔닝 값이 되어있는 요소를 기준으로 배치를 하게 된다.

 

 

 

4. position : sticky;

 

 

sticky 포지셔닝은 기준점내에서는 relative 의 속성과 비슷하게 작용하지만, 기준을 벗어나면 fixed 와 같은 속성을 가진다.

 

fixed 와 의 차이점은 fixed 는 브라우저를 기준으로 작용하지만, sticky는 scroll 박스를 기준으로 작용한다.