position 속성, inline, block, float

position 속성 - relative, absolute, fixed

relative

• 기준이 내 원래 위치이며
• Top, left, right, bottom 프로퍼티가 있어야 원래 위치에서 이동할 수 있다.
• Top, left, right, bottom 는 position이 설정되어 있어야 적용가능하다.

위 그림에서는 div.relative에 postion을 relative로 주고 top속성으로 위에서 20px 이동하고 왼쪽에서 30px 이동시켰습니다.

absolute

• 기준은 현재 위치의 부모이며

• 부모 중에 position이 설정되어 있지 않으면 position이 설정되어 있는 부모를 찾을 때 까지 올라가 그 부모를 기준으로 이동

• 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다.

• 최종 위치는 top, right, bottom, left 값이 지정합니다.

이동은 relative와 동일하며 기준이 relative는 자기 위치이고 absolute는 부모 위치이다.

fiexed

• 말 그대로 고정되었다는 의미
• 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
• 최종 위치는 top, right, bottom, left 값이 지정합니다.

따라서 스크롤을 실행하여 화면 밖으로 이동하려고 해도 항상 그 위치에 고정되어 있다.

inline, inline-block, block

inline

inline은 주로 텍스트를 주입 할 때 사용하는 태그로 기본적으로 width값이 컨텐츠의 영역 만큼 자동으로 잡히게 되며

라인이 새로 추가되지 않습니다.

• Width, height 명시 불가
• margin은 위아래 적용 불가

block

block은 한 영역을 차지하는 박스형태을 가지는 성질으로 기본적으로 width 값이 100%입니다. 라인이 새로 추가 된다는 것을 알 수 있다.

• block은 height와 width을 지정할 수 있다.
• margin과 padding 도 지정할 수 있다.

inline-block

Inline-block 은 말 그대로 inline 특징과 block 특징을 모두 가진 요소이다.

• 줄바꿈이 이루어지지 않는다.

• block처럼 width와 height 지정 가능하다.

• Width, height를 지정하지 않으면 컨텐츠 만큼 영역이 잡힌다.

float에 대해서

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

• [left] - 왼쪽에 블록 박스를 생성, 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
• [Right] - 오른쪽에 블록 박스를 생성 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름
• [None] - 요소에 영향이 없다. 기본값
• [initial] - 기본값으로 설정함
• [Inherit] - 부모 요소에서 상속

Left,right 속성을 지정하면 display는 무시된다.