Position

position 속성을 통해 문서의 요소를 배치하는 방법을 지정한다.

1.포지션을 사용할때는 어떤 종류의 position을 쓰는지와 그 position이 어떠한 기준점으로 움직이는 지를 확인 해야한다. (기준 확인 ex- position: absolute;

)
2.이동을 시킨다 (ex- bottom: 20px;)

static

-모든 요소의 기본값

relative

⚫️기준점: 원래 있던 자리
⚫️특징:
1.부모요소를 떠나서 float처럼 위로 뜬다.(레이아웃이 무너지거나 주변요소에 영향을 끼치지 않는다)

absolute

⚫️기준점: 자신이 기준점을 정할 수 있다.(position이 static이 아닌 요소를 기준으로 삼을 수 있으며 주 로 부모요소에 position:relative 값을 준다.)
⚫️특징:
1.display 값이 block으로 변하지만 옆으로 다른 요소가 올 수 있다.
2.부모요소가 인식을 하지 못한다.
3.inline 컨텐츠가 인식하지 못한다. (float와의 차이점)

fixed

⚫️기준점:viewport 창을 기준으로 삼는다.(absolute와의 차이점)
⚫️특징:
1.display 값이 block으로 변하지만 옆으로 다른 요소가 올 수 있다.
2.부모요소가 인식을 하지 못한다.
3.inline 컨텐츠가 인식하지 못한다. (float와의 차이점)

inline, inline-block, block

display: box type을 결정 하는 속성, box type에는 inline, inline-block, block이 있다.

inline

⚫️특징:
1.라인 하나에 여러요소가 배치 될 수 있다.
2.width,height,padding-top,padding-bottom,border-top,border-bottom,margin- top,margin-bottom 사용불가

inline-block

⚫️특징:
1.라인 하나에 여러요소가 배치 될 수 있다.(inline의 특징)
2.width,height,margin,padding 모두 사용가능 (block의 특징)

block

⚫️일반:1.사각형 덩어리, 2.건물, 관, 3.(지나가지 못하게)막다, 차단하다
⚫️특징:
1.라인 하나에 한개의 요소만 배치 될 수 있다.
2.따로 width를 선언하지 않은 경우, width = 부모의 content-box의 100%(부모의 영역만큼)
3.width를 선언한 경우, 남은 공간을 margin으로 채운다.(개발자 도구로 확인 해 보면 margin영역 확인이 안된다)
4.height 값을 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height가 된다.
5.width,height,margin,padding 모두 사용가능

참고사이트

https://creamilk88.tistory.com/197

https://www.w3schools.com/css/tryit.asp?

filename=trycss_position_relative

김버그의 HTML&CSS는 재밌다 (강의)