[CSS] 레이아웃 정리 display, position 완성

CSS 레이아웃 정리 display, position 완성

Display

display 실습

block인 div를 inline-block으로

inline인 span을 block으로 display해줄 수 있다.

 

position 실습

Position

position: static; //CSS default 값
position: relative; //원래 위치에서 옮겨감
position: absolute; //내 item이 담겨있는 박스안에서 위치 변경 
position: fixed; //박스를 완전히 벗어나 윈도우(페이지)안에서 위치변경
position: sticky; //원래 자리에 있되, 스크롤을 올리거나 내려도 그 자리 유지

 

absolute를 쓰면 가까운 위치에 있는상자(부모)에서 배치되고 맞기는 하지만 
그경우는 부모속성에 relateve를 주어야 함
그렇지 않을경우에는 부모밖으로 나가 버림