내가 보려고 만든 position 완전히 이해하기

position 사용하기

position:relative; top:0px; left:0px;

 -> 0px 만큼 이동한다.

 

position의 종류

position : static	default. HTML에 적힌 순서대로 나타남 실제로 적지는 않음
position : relative	원래 있어야할 자리에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받음 *z-index를 적용하기 위한 용도로 써주기도 한다.
position : absolute	자신이 담겨 있는 (가장가까운상위)박스의 (0,0)에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받지 X (담겨 있는 박스 경계선 안에서 떠있다)
position : fixed	스크롤해도 고정됨 상위 태그와 상관 없이 개별적 위치를 가짐 (sticky와 차이점 : 1. 처음 표시되는 위치, 스크롤 시 고정된 위치가 같음, 2. 상위상자에서 벗어남)
position : sticky	스크롤하면 top, left 의 픽셀만큼 이동한 상태로 고정(margin, padding에 영향을 받지 X) 상자 안에서 움직임 처음 화면에서는 default position의 위치에 보여짐 0이라도 top,left 값을 입력해야 고정됨(default가 없나?) 'position이 relative인 요소'에 영향을 줌

 

*부모태그 position : relative로 설정 -> 자식태그 position : absolute;

(부모태그가  relative이면 자식태그 margin적용됨)

 

그냥 궁금증 list

 

부모상자가 relative이고 자식도 relative이면?

-> 부모가 absolute일 때와 같다.

자식태그는 이미 부모 상자 안에서 시작하기 때문에

자신의 position속성에 따라 부모 상자 안에서 움직인다.