CSS / position 에 대하여

position 개념이 조금 헷갈려서 유튜브 영상을 참고하여 다시 공부하고 정리해보았다.

 

출처 : 드림코딩 by 엘리

 https://www.youtube.com/watch?v=jWh3IbgMUPI&list=RDCMUC_4u-bXaba7yrRz_6x6kb_w&index=1 

학원에서 잘하는 분한테 추천받은 유튜버인데 엄청 이해하기 쉽게 설명해주고 무엇보다 목소리가 너무 좋음

영상 내용을 요약하자면,
static : default값 (처음 위치)
relative : 원래 있어야하는 위치에서 변경이 됨
absolute: 가까이에 있는 상자(이동하고자 하는 박스가 들어가있는 큰 박스)에서 위치변경이 일어남
fixed: 상자에서 벗어나서 전체 페이지를 기준으로 위치변경이 일어남
sticky: 원래 자리에 있는데, 스크롤링해도 위치를 유지하고 붙어있음

 

사실 글로만 보면 이해가 잘 안되고, 이미지로 보는 게 직관적일 거 같아서 영상 일부를 캡쳐해두었다.

 

1/ 가장 큰 박스 (부모 element 인 .container)에 위치값 주면 -> 아무일도 X

2/ 이 때 부모 element (.container)에게 position:relative를 넣어보면,

    원래 위치(처음 위치)인 html의 좌측상단에서부터 위치를 이동함

 

 

부모 element 에 position:relative 값을 준 상태에서, 이제 자식 element들 을 건드려 보자.

 

3/ 자식 elements 중 하나인 .box에 position:relative 를 설정할 경우

   원래 자신의 위치를 기준으로 이동

 

4/ 자식 elements 중 하나인 .box에 position:absolute 를 설정할 경우

   원래 자신의 위치에서가 아닌, 자신이 들어있는 큰 상자(부모 element)를 기준으로 이동

 

5/ fixed로 설정할 경우엔, 아예 전체 body를 기점으로 이동한다. 

6/ sticky로 설정할 경우엔, 원래 자신의 위치에 그대로 있는데, 스크롤을 내려도 그 자리에 그대로 붙어있는다.

 (웹페이지 상에서 상단 메뉴라던가 사이드바 같은게 계속 보이길 원하면 저걸 쓰지 않을까싶다)  

 

 

 

추가로, 

부모 element에  relative값을 주지 않고 자식 element에게만 각각 relative와 absolute를 준다면?

 

1/ 자식 element 만 poisition:relative일 때,

부모에 대해 상대적으로, 즉 부모를 기준으로 이동하고, 부모에게서 물려받은 속성도 유지가 됨

 

2/ 자식 element 만 poisition:absolute일 때,

부모에게서 독립하게 되고 부모에게서 물려받은 속성도 버리게 된다.

하지만, 속성은 버리더라도 위치는 우선은 부모 엘리먼트를 기준으로 해서 위치하고 있다가 위치를 지정해주면, 그때서야 다음 부모의 위치로부터 이동하게 됨.

풀어 말하자면,

left/top값을 지정해주지 않고 딱 (position:absolute;) 값만 주면

자기가 그냥 있어야할 위치, 즉 기본값인, 원래 부모 엘리먼트를 기준으로 해서 위치하고 있다가,

이 때 left:0; top:0 이런식으로 위치를 지정해주면 그때서야 다음 부모인 html 을 기준으로 위치를 바꾼다. 

 

3/ 자식 element 만 poisition:fixed일 때,

역시나 부모에게서 독립되어 속성도 부모의 속성을 버리고, 위치도 전체 body를 기준으로 바꾼다.

그리고 스크롤을 내려도 위치가 고정되어 계속 화면상에 나타난다.