[CSS] Position

Position

화면상의 element가 어디에 위치할 것인가 라는 것을 결정하는 주제

• static(default)
• relative
• absolute
• fixed

 

staic vs relative

다음과 같이 other, parent, me element가 있을 때 element들은 그림과 같은 position에 위치하게 된다.

 

 

 

me의 style 속성에서 left와 top에 100px씩 값을 지정했지만 그 값들은 무시된다.

 

 

 

element에는 CSS에서 기본적으로 적용되는 position 속성이 있는데 그 값이 바로 static이다. static은 offset을 무시하고 자기가 원래 위치해야 하는 곳에 정적으로 위치하게 된다. 즉, 위치와 관련된 설정을 하지 않은 상태라고 말한다.

 

 

 

element를 자기가 있어야 하는 위치를 기준으로 부모에 대해서 상대적으로 100px 만큼 왼쪽으로 가게 하고 싶거나 위에서 아래로 이동시키고 싶을 때는 position의 타입을 relative로 지정하면 된다.  (우선순위 :  left > right, top > bottom)

 

 

absolute

position의 타입 중 absolute에 대해서 알아보자 !

 

 

 

 

경우에 따라 element를 부모가 아닌 이 웹 페이지의 가장자리에 있는 HTML element를 기준으로 위치를 지정하고 싶은 경우에 position 타입을 absolute로 지정한다. 이런 경우에 left와 top에 0px로 설정하면 다음과 같이 위치하게 된다.

 

정확하게는  HTML element 라기 보다 상위의 position이 static이 아닌 element의 위치를 기준으로 위치하기 때문에 other과 parent는 기본값인 static으로 무시된다.

 

 

 

 

만약에 position이 relative 타입이였다면 부모인 parent를 기준으로 0px 이동하게 된다.

 

 

 

absolute 타입에서 left, top 값을 지정하지 않으면 부모 element를 기준으로 자기의 위치가 생긴다. 그 이유는 left와 top의 기본값이 부모를 기준으로 한 위치값으로 지정되기 때문이다.

 

따라서 absolute 타입에서의 기본값은 부모를 기준으로한 위치값이지만 left, top값을 지정해주면 상위의 position이static이 아닌 부모를 기준으로 offset이 지정된다. 

 

그리고 me는 원래 parent의 자식으로 소속되어있지만 position을 absolute로 하게 되면 링크가 끊기면서 부모와는 무관해진다. 그렇기 때문에 me라고 하는 태그가 parent의 자식이 아닌 것 처럼 자기 자신의 content 크기만하게 사이즈가 작아진 것이다.

 

 

 

fixed

 

 

fixed라는 것은 어떤 특정한 element를 화면에 그 위치에 고정시켜서 스크롤로부터 완전히 독립되게 고정하는 것이다. 배지(badge)와 같은 ui를 만들 때 fixed를 사용할 수 있다.

 

 

 

fixed도 absolute처럼 width와 height 값을 지정하지 않으면 자기 content 크기만큼 size가 바뀐다. 또한 부모 element와 인연이 끊겼기 때문에 부모 element의 크기는 자식 element의 크기를 포함하지 않는다.

 

 

 

참고: https://opentutorials.org/course/2418/13414