position 속성과 특징
- position 이란?
- position의 속성
- static
- relative
- absolute
- fixed
- sticky
- position 속성과 width, height
- position 속성과 z-index
position 이란?
CSS에서 position(이하 포지션)은 화면 상에 요소(element)들을 어떻게 배치할 지 정하는 속성입니다. 레이아웃을 배치하거나, 객체를 위치시킬 때 사용하며 상속되지 않습니다. position 으로 위치의 기준을 정하고 top bottom left right 속성을 사용해서 요소의 구체적인 위치를 지정해 줍니다.
position 속성에는 static relative absolute fixed sticky 가 있습니다.
position의 속성
static
position:static;
기본값
static 속성은 별도로 position 속성을 지정하지 않아도 적용 되어있는 기본값입니다. 일반적인 글의 흐름(왼쪽에서 오른쪽으로, 위에서 아래로)을 따라서 요소들은 원래 있어야 할 곳에 배치됩니다. 따라서 top bottom left right 속성을 사용해서 위치를 지정할 수 없는 유일한 position 속성입니다.
아래의 속성으로 position 속성을 변경(포지셔닝)하면 일반적인 흐름에서 벗어나서 배치할 수 있습니다.
relative
position:relative;
기존 위치를 기준으로 배치
relative 은 원래 있어야 할 위치를 기준으로 배치하는 속성입니다. 원래 있던 공간은 공백으로 자리를 그대로 차지하고 있습니다. top bottom left right 속성으로 요소가 원래 위치를 기준으로 상하좌우 얼마나 움직일지를 지정합니다.
absolute
position:absolute;
static이 아닌 포지셔닝이 된 가장 가까운 부모 요소를 기준으로 배치
absolute 속성은 static 이 아닌 다른 속성으로 포지셔닝이 된 가장 가까운 부모요소를 기준으로 배치합니다. 포지셔닝된 상위요소가 없다면 body태그가 기준이 됩니다. relative 와의 차이점은 글의 흐름에서 완전히 빠져서 원래 있어야 할 자리의 영역을 차지하지 않습니다.
부모 요소를 옮기지 않고 그 요소를 기준으로 옮기고 싶다면 부모 요소를 position:relative; 로 포지셔닝한 후 좌표프로퍼티( top bottom left right) 를 이용하지 않으면 기준으로 삼을 수 있습니다.
fixed
position:fixed;
브라우저 화면을 기준으로 배치되어 스크롤 해도 웹화면의 같은 위치에 고정.
fixed속성은 부모요소와 상관없이 브라우저 화면을 기준으로 배치되어 고정됩니다. absolute 속성처럼 기존 배치에서 완전히 빠져서 자리를 차지하지 않습니다.
sticky
position:sticky;
static처럼 원래 위치에 배치되어 있다가 스크롤 할때 지정한 위치가 브라우저 화면 상단에 닿는 순간 부터 'fixed'처럼 고정.
sticky 속성은 static 처럼 원래 위치에 배치되어 있다가 지정한 위치에 브라우저 화면 끝에 닿는 순간 부터 fixed처럼 고정됩니다. 이때 정해진 위치는 좌표 프로퍼티로 정한 스크롤 도달 위치를 말합니다.fixed 와의 차이점은 기존 배치에서 완전히 빠지지 않고 부모요소에 소속되어 있어 부모요소가 화면 밖으로 사라지면 함께 사라집니다.
position 속성과 width, height
absolute,fixed 의 경우 기존 배치에서 완전히 빠져서 자리를 차지하지 않기 때문에 사이즈를 따로 지정하지 않으면 inline 요소처럼 요소 안에 있는 content에 맞게 크기가 변경됩니다. 적절한 사이즈를 지정해 주어야 합니다.
inset : 0; = top:0; bottom:0; left:0; right:0;
width 100% =left:0; right:0;
position 속성과 z-index
z-idex 란 요소가 겹칠 경우, 앞 뒤 순서를 정하는 값입니다. 순서이기 때문에 단위 없이 숫자로만 표시하며 기본 값은 auto(=0)로 음수 값도 사용할 수 있습니다. 숫자가 클수록 순서가 높으며 숫자가 같다면 코드가 아래 줄에 있는 요소가 순서가 높아서 앞쪽에 보입니다.
position : static; 인 요소와 포지셔닝된 요소가 겹치면 포지셔닝된 요소가 앞쪽에 자리를 차지 합니다.
static은 z-index가 적용되지 않기 때문에 static인 요소의 순서를 높게 하기 위해서는 relative로 포지셔닝한 후 z-index 를 적용해 주면 됩니다.
