css - position

🟣 position :

부모와의 관계속에 자신의 위치가 필요할때 쓰임.

🔹 static :

position에 값을 주든 주지않든 기본값임.
left:0; 변화없음.

🔹 relative :

부모 tag를 기준으로 해서 자기자신은 상대적으로 움직임.(같이 움직임)
left:20px; 원래 자신의 자리에서 20px만큼 왼쪽으로 이동.

🔹 absolute :

내 아이템이 담겨있는 박스안에서 위치변경.
부모로부터 자유로워져서 자신의 크기를 가지게 됨.
left:0; (왼쪽으로 붙고) top:0;(위로 올라감)
=>부모의 위치를 기준으로 해서 0값 계산한다!

✔️부모의 값이 static이 아닐때만 자신의 left,right,top,bottom의 기준을 부모로 잡는다. 부모가 static일 경우 absolute는 부모를 무시. 바로 body를 0값으로 잡는다. 부모의 부모를 따라간다.

🔹 fixed :

자기 컨텐츠 크기로 변한다.
부모중 누가 relative가 있는지 없는지 상관하지 않는다. 최상위에 있는 tag를 기준으로 해서 자신의 기준을 맞춘다. (스크롤은 무시한다)
window 안에서 옮겨짐.

🟣 display

block:<header>,<footer>,<p>,<li>,<table>,<div> 등
inline:<span>,<a>,<img> 등
  

🔹 block

margin,padding 지정가능
text-align,vertical-align은 안된다.
중앙에 위치시키고 싶은 경우, margin-right,margin-left 두값을 auto로 두면 된다.

🔹 inline :a tag나 span tag

width,height 지정은 불가능.
margin은 좌우만 가능.
padding은 상하좌우 가능.
text-align은 부모요소가 지정해서 사용가능.

🔹 inline-block:

block 높이 지정이 가능하다.
inline과 같이 옆에서 지정 가능하다.
width,height(0)
margin,padding(0)
text-align, vertical-align(0)

span tag에 display:block과 같이하면 div와 같이 한줄에 하나씩 출력
div tag도 display:inline-block하면 한줄에 여러개 출력.