39일차 - [CSS] position

안녕하세요. pitang입니다.

CSS의 position 속성에 대해 알아보겠습니다.

 

position

position 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정한다. 

 

position의 속성은 5가지의 값이 존재하고 아래와 같다.

static - position의 기본값
relative - 위치가 상대적인 요소이고, 정상 위치에 비례하여 배치된다.

fixed - 뷰포트(브라우저창)를 기준으로 배치되며, 페이지가 스크롤되더라도 항상 동일한 위치에 배치한다.

sticky - 사용자의 스크롤 위치에 따라 배치된다.

absolute - 가장 가까운 위치에 있는 상위(바로 위 조상 요소)에 상대적으로 배치된다. (정상적인 배치 흐름에서 제외)

 

예제를 보면 확실히 이해가 갈 것이다.

 

position - static

static은 position의 기본 값, 이동하지 않는다.

 

ex1)

56position-static.html

console

 

position - relative

relative는 위치가 상대적인 요소이고, 정상 위치에 비례하여 배치된다.

 

ex1)

57position-relative.html

console

 

 

ex2)

58position-relative.html

console

다섯번째 박스에 마우스를 올리고 있으면 아래에서 위로 5px만큼 올라가는 것을 볼 수 있다.

 

position - fixed

fixed는 뷰포트(브라우저창)를 기준으로 배치되며, 페이지가 스크롤되더라도 항상 동일한 위치에 배치한다.

 

ex1)

59position-fixed.html

console

브라우저 스크롤을 하더라도 1, 2, 3, 4 박스는 네 귀퉁이에 붙어 있는 것을 볼 수 있다.

 

ex2)

60position-fixed.html

console

브라우저 스크롤을 하더라도 아래 오른쪽의 아이콘이 고정되어 있는 것을 볼 수 있다.

 

position - sticky

sticky는 사용자의 스크롤 위치에 따라 배치된다.

fixed와 다른 점은 fixed는 항상 동일한 위치에 sticky는 스크롤에 따라 위치에 배치된다.

 

ex1)

61position-sticky.html

console

 

position - absolute

absolute는 가장 가까운 위치에 있는 상위(바로 위 조상 요소)에 상대적으로 배치된다.

다른 값들과 다르게 정상적인 배치 흐름에서 제외된다.

 

ex1)

62position-absolute.html

console

 

ex2)

63position-absolute.html

console(1)

console(2)

햄버거 아이콘에 마우스를 올렸을 때, 왼쪽에서 30px, 위에서 -3px만큼 떨어지게 정상적인 배치 흐름에서 벗어나 위치하게 할 수 있다.

 

ex3)

64position-absolute.html(1)

64position-absolute.html(2)

console

세번째 박스(main-menu-item)에 마우스를 올렸을 때, sub-menu가 상대적으로 배치되는 것을 볼 수 있다.

 

ex4)

65position-absolute.html

console

absolute는 배치 흐름의 영향을 주지 않기 때문에 h1 요소를 가리게 되는 것을 확인할 수 있다.

 

ex5) z-index

z-index는 값이 작을수록 눈에서 멀어진다.

눈에서 멀어진다라는 뜻은 우선순위가 밀린다는 것이다.

66position-absolute-z-index.html

console

 

ex6)

67position-absolute.html

console

 

ex7) flexbox - position 활용 

flexbox와 position 모두를 활용해 아래의 결과를 확인해보자.

console

55flexbox.html(1)

55flexbox.html

55flexbox.html

 

 

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*