CSS position

static relative absolute fixed

(기준점이 중요)

 

static :

  기본상태 차곡차곡 쌓임

 

relative :

  ①본래 내자리를 기준으로 움직임 - 다른 요소에 영향을 미치지 않음

  ②자기 자리 잃지 않음

absolute : 

  ① postion이 relative, absolute, fixed 인 부모를 기준으로 자신을 위치시킴

  ② 집 나간 내 content 못찾음 

  ③ block으로 신분 상승

  ④ 길막 못하는 block

 

box1에 position을 줘서 붕떠버린 자리를 그 다음 box2와 box3이 앞으로 밀리면서 매꿈

-> 길막 못하는 block

->box1이 집나가버려서 부모요소(그레이색)의 크기도 자동으로 줄어듦

 

 

 

부모인 basebox에 position: relative가 적용되어 있어서 absolute인 box1의 기준점이 부모인 basebox가 됨

여전히 집나가있는 상태라 부모요소 크기는 줄어들어있음

fixed : absolute 의 ② ③ ④ 성질과 같지만 기준점이 "viewport"로 명확

          ② 집 나간 내 content 못찾음 

          ③ block으로 신분 상승

          ④ 길막 못하는 block

 

+position : fixed; 쓸 때는 항상 width를 설정해주어야돼!!

+z-index : 작은게 아래