[CSS] Position

요소를 원하는 위치로 이동시키기 위해 사용되는 속성입니다.

 

position을 사용할 때 생각해야 하는 두 가지

1. 내가 어떤 종류의 position을 사용하고 있는지

2. 내가 사용하는 position은 무엇을 기준으로 요소를 위치시키는지

 

 

 

static

모든 요소의 기본 position 값입니다.

position: static;

 

 

 

relative

기준점: 자기 자신이 원래 있던 자리

있던 자리를 알고 있기 때문에 float처럼 레이아웃을 붕괴시키진 않습니다.

{
	position: relative;
	top: 40px;
	left: 40px;
}

 

 

 

 

absolute

기준점: 자기를 감싸고 있는 여러 조상 중 position이 static이 아닌 요소 하나를 선택해서 기준을 잡을 수 있습니다.

{
	position: absolute;
    top: 40px;
    left: 40px;
}

 

float를 사용했을 때 나타나는 현상 1,2,3과 동일한 현상이 발생합니다.

 

• absolute 사용시 block 으로 변합니다.
• absolute 사용시 parent가 인식하지 못합니다.
• absolute 사용시 길을 막지 못하는 block으로 변합니다.

 

float와 차이점은 inline도 absolute를 인식하지 못합니다.

그래서 inline 중간에 absolute가 된 요소가 떠다니곤 합니다.

 

 

 

fixed

기준점: viewport의 사이즈를 기준으로 자신을 위치시킵니다.

{
	position: fixed;
    bottom: 40px;
    right: 40px;
}

 

absolute와 일어나는 현상이 같습니다.

 

 

sticky

평소 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르다가 스크롤 위치가 임계점에 이르면 position:fixed와 같이 요소를 화면에 고정할 수 있습니다.

최신 브라우저 대부분에서 잘 동작하는 편이지만 IE 같이 sticky 기능을 지원하지 않는 브라우저도 있습니다.

https://caniuse.com/css-sticky 이곳에서 브라우저 지원을 확인해 볼 수 있습니다.

 

 

 

위치시키기

position을 이용한 요소는 다음과 같이 top, right, bottom, left 를 이용하여 위치시킵니다.

 

• top - bottom 중 한 가지
• left- right 중 한 가지

를 사용하여 위치시키는 것이 좋습니다.