[CSS] 4. position

position

- position 속성을 통해 요소를 배치 방법을 지정하고, top, left, bottom, right, z-index에 따라 오프셋 적용하여 을 통해 최종 위치 결정

- 부모 중 제일 가까운 포지션에 기준하며, 포지션이 없으면 클래스 배너를 기준으로 함

1. static: 기본값, 블록

- top, left, bottom, right, z-index 설정 안됨

 

2. relative: 자신의 원래 위치(static 위치) 기준으로 배치

- top, bottom을 같이 쓸 수 없음 (왜 안되는지는 모르겠음)

ex) top: -50px; botttom: 50px

-  이때는 상대단위, 퍼센트로 하는 건 좋지 않음 => 차라리 위치 변경은 translate를 사용하자

 

3. absolute: 가장 가까운 relative 조상을 기준으로 배치

- 블록 속성이 사라지고, 인라인 속성처럼 바뀌기 때문에 height , width를 명시해야 함 (width는 100%를 주자)

- height과 width가 auto면 자신의 콘텐츠에 맞춰 크기가 바뀜

- 가상 요소일 경우, top과 bottom은 지정하고, height을 지정하지 않으면(즉, auto면) 사용 가능한 수직 공간을 가득 채움

- 가상 요소일 경우, left과 right은 지정하고, width을 지정하지 않으면(즉, auto면) 사용 가능한 수평 공간을 가득 채움

- 부유하기 때문에 z축을 고려해야 함 (헤더의 경우 z-index:999로 설정)

- - top, bottom을 같이 쓸 수 있음

 

4. fixed:

- 부모 요소로부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치됨

- 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 요소들이 상하좌우로 움직일 때, 해당 요소는 그 자리에 고정되어 있음

- 초기 컨테이닝 블록을 기준으로 배치

- 요소의 조상 중 하나가 transform, perpective, filter 속성 중 하나라도 가지고 있으면 그 조상을 기준으로 배치

- 블록 속성이 사라지고, 인라인 속성처럼 바뀌기 때문에 height , width를 명시해야 함

- 헤더가 고정되어야 하기 때문에 fixed를 사용함

 

5. sticky: 스크롤했을 때, 본인과 가장 가까운 조상이 스크린에서 사라질 때까지 따라다니며 존재함

- 어떠한 시점애서 고정된 위치값을 가질 수 있음

- 조상이 스크린에서 사라지면 같이 사라짐

- 부모 요소의 overflow: hidden이 있으면, 적용 안 됨

 

그림을 두고 설명하면 좋을듯 나중에 수정하자

https://www.daleseo.com/css-position/ 이것을 보고 보완하자

 

https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block

 

 

+

top과 bottom을 같이 지정한 경우, top 우선 적용

left와 right를 같이 지정한 경우, 영어나 한국어이면 left 우선 적용

 

++

z-index는 10, 20, 30 , 100, 200, 300 간격으로 쓰임

제일 위에 있어야 하는 것은 9999를 사용함

 

+++

레이아웃에 적용되는 것은 absolute보다 flex, grid를 자주 사용함

 

++++

이전에 언급했지만 다시 강조하자면,

absolute와 fixed가 되면 width와 height이 사라지기 때문에 다시 명시해줘야 함

---

[참고하면 좋을 자료] https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block

컨테이닝 블록의 모든 것 - CSS: Cascading Style Sheets | MDN

 

 

[출처] https://developer.mozilla.org/en-US/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

 

https://www.daleseo.com/css-position/

CSS의 5가지 position 속성 값 기본 정리

https://www.tcpschool.com/css/css_position_position

코딩교육 티씨피스쿨

https://www.daleseo.com/css-position-fixed-navigation/

CSS의 fixed position으로 메뉴바 상단 고정