[CSS] position 속성 제대로 알고가기

 

매번 익숙한 position: absolute;만 사용하다가
가끔 fixed를 사용할일이 생기면 생각없이 사용하는것 같아서 마음에 걸렸다.
다시 개념정리를 정리해보자!

 

 

📌 position

position은 요소의 위치를 정해줄 수 있는 속성이다.
static을 제외한 나머지 type들은 사용시 z-index 레벨이 생성된다.

김버그님 CSS 기초 강의 들을때 보고 저장해 둔 이미지

 

 

📌 position : static

• position의 default type.
• 태그 순서대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

 

 

 

📌 position : relative

• static과 동일한 위치로 보이지만 z-index가 생성되어 floating된 상태.
• top, left, right, bottom 옵션을 주면 위치가 변화하지만, 다른 요소에 영향을 주지 않는다. (원래 있던 영역을 그대로 비워두고 움직인다.)

 

 

📌 position : absolute

• 조상요소 중에 position: static;을 가지고 있지 않는 요소를 기준으로 움직인다.
  (조상요소가 모두 static이라면, body를 기준으로 움직인다.)
• 따라서 기준점이 되는 요소를 새로 정할 수 있다.
• absolute 요소의 위치 기준점으로 삼고 싶은 조상요소에 relative 속성을 부여한다.
• absolute를 주면, 원래 있던 영역은 사라지고, 다른 요소가 땡겨올라와 그 자리를 채운다. (absolute 요소는 붕 떠있는 상태)

 

 

📌 position : fixed

• absolute와 동일하게, floating되면서 원래 가지고 있던 영역을 잃어버린다.
• 위치의 기준점은 viewport가 되어 스크롤 시에도 위치가 고정된다.
• 위치값을 정해주지 않으면 원래 있던 자리에 고정된다.
• 위치값을 정해주면 처음부터 그 위치에 고정된다. (sticky와 다른 점)

 

 

📌 position : sticky

• 지원 브라우저가 많지 않음 주의
• 원래 가지고 있던 영역을 유지하고, 다른 요소에 영향을 주지 않는채로 floating된다.
• 원래 있던 위치에서 스크롤 되다가, 새로 지정한 위치값에서 더이상 움직이지 않고 고정된다.
• 위치값을 정해주지 않으면 고정되지 않는다.

 

 

One more thing

• display 속성을 부여하면 요소가 inline요소 였더라도
  display: block;과 '거의' 동일한 상태가 된다. (static 제외)
• 하지만 relative는 width, hight 등이 안먹히고, absolute fixed 는 margin: 0 auto; 등이 안먹힘..

 

 

 

 

 

테스트해봐도 좀 헷갈리는데, 나중에 더 잘 알게되면 내용을 추가하자
(test code) https://codesandbox.io/s/gracious-elion-nbh19?file=/src/styles.css&resolutionWidth=112&resolutionHeight=196