[CSS] position의 속성

CSS 에서 특정 요소의 위치를 지정하는 속성으로 position 속성이 있다.

 

position 속성에는 static, absolute, fixed, relative 가 있다.

 

---

 

 

1) static (사람화)

position 을 아무것도 지정하지 않으면 사용되는 기본 값이다.

기본 값이기 때문에 보통의 경우 잘 쓰이지 않는 값이다.

---

 

2) absolute ( 유령화,유령의 집화 )

엘리먼트를 자유로운 유령으로 만드는 것!

position 을 absolute 로 지정하는 것은 fixed 와 비슷하지만 다르다.

 fixed 는 사용자의 브라우저를 기준으로 위치를 고정시키는 것이지만, absolute 는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 시키는 것과 같다.

위치가 지정된 부모요소라는 것은 결국 position 속성이 static 이 아닌 다른 값으로 지정 되어야 함을 의미함!

 

 

---

3) fixed ( 유령화,유령의 집화 )

absolute와 같이 자유로운 유령으로 만드는 것이지만 다른점은

position 을 fixed 로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있다.

스크롤을 내려도 항상 같은 곳에 위치하는 것들은 position을 fixed로 준 것이다 ( 주로 상단바, 하단바, 광고 등)

top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있다.

 

---

 

4) relative (유령의 집화)

position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있다.

이 말을 다른 말로 하면 position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음.

position이 absolute인 요소의 부모에게 position:relative를 주면 아무리 자식이 크기를 설정해도 부모인 relative 안에서만 놀게된다. 유령을 가두는 유령의 집 같은 개념이다.

 

---