position은 레이아웃을 배치하거나, 객체를 위치시킬 때 사용하는 css속성이며 상속되지 않는다.
static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
absolute의 경우에는 부모가 없거나 부모의 속성값이 static이라면 브라우저 기준으로 위치가 이동한다고 생각하면 된다.
display 속성값
- block
- inline-block
- inline
Block
block 속성은 inline과 달리 content내용만큼만 차지하는 것이 아니라 그 자체로 한 줄을 완전히 차지한다
대부분의 HTML태그는 block의 속성을 가지고 있다.
inline-block
inline-block는 inline엘리먼트와 비슷하지만 너비와 높이를 설정할 수 있다
inline
inline 속성값은 줄을 바구지 않고 다른 요소와 함께 한 행에 위치하려고하는 성격을 가지고 있다
(span,a,img 등이 모두 inline 성향을 띄고있는 태그이다)
상,하단 외부 여백(margin-top,margin-bottom)속성을 정의해도 적용되지 않는다. (padding값은 적용이 가능하다) 인라인 요소의 상,하 여백은 margin이 아닌 line-height 속성에 의해 발생한다.
너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
