CSS3 - 위치 속성

position 속성

키워드	설명
static	기본값, 다른 태그와의 관계를 따져 순서대로 배치
relative	초기 위치를 기준으로 상, 하, 좌, 우로 이동
absolute	절대 좌표를 기준으로 지정
fixed	'화면'을 기준으로 절대 좌표를 지정

HTML 태그의 위치를 설정하는 방법을 변경하고 싶을때 position 속성을 사용한다. 상대 좌표를 사용할 때는 position 속성에 static 키워드 또는 relative 키워드를 적용한다. static 키워드는 기본값이며, 태그가 위에서 아래로 왼쪽에서 오른쪽으로 순서에 맞게 배치된다.

 

relative 키워드는 초기 위치(원래 있던 위치)를 기준으로 상, 하, 좌, 우로 위치를 이동한다.

 

absolute와 fixed는 각각 '절대위치'로 좌표를 설정하고 다른 하나는 '화면'을 기준으로 좌표를 설정한다. position을 absolute나 fixed로 하는 경우 block 태그의 속성이 사라질 수 있고, 부모태그와 자식태그의 관계가 모호해진다.

 

사용하기 위해서는 두가지를 알아야 하는데,

첫 번째로 자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용해야한다. 이것은 부모 태그가 영역을 가질 수 있게 만드는 역할을 한다.

 

두 번째로 자손의 position 속성에 absolute를 적용하면 부모의 position 속성에 relative 키워드를 적용한다. 이것은 자손 태그가 부모의 위치를 기준으로 좌표를 설정하게 된다.

position.html

0.00MB

z-index 속성

z-index는 각각의 태그의 우선순위를 말하며 z-index 속성의 값이 크면 클스록 맨 앞에 배치가 된다. 겹쳐보이는 그림에서 무엇을 가장 앞에 배치하냐는 z-index의 속성값에 따라 달라진다.

position, z-index.html

0.00MB

overflow 속성

overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때에 처리하는 방법이다. 

키워드	설명
hidden	영역을 벗어나는 부분을 보이지 않게 한다.
scroll	영역을 벗어나는 부분에 스크롤을 만든다.
auto	자동으로 위의 두개의 설정을 적용한다.

overflow.html

0.00MB