[CSS]포지션(position)

1. 포지션 position

속성
static
relative
abosulte
fixed
sticky


2. static 포지션
position의 기본 값
원래 있어야 할 위치에 배치
일반적인 글의 흐름을 따른다

 

3. 기준 위치에서 자리 옮기기
static을 제외한 나머지 포지션은
top right bottom left를 기준으로 위치를 정할 수 있다.


4. relative 포지션
원래 있어야할 위치를 기준으로 자리를 정한다.

margin이랑 다른점은 margin은 다른 요소의 위치에 영향을 주지만
포지션을 이용하면 영향을 주지 않는다.
자리를 움직여도 기존위치 영역에 다른 요소가 채워지지 않는다.


5. absolute 포지션
가장 가까이 포지셔닝(static을 제외한 나머지)이 된 조상요소를 기준으로 배치한다.
부모 요소가 포지셔닝이 안되어있으면 그 위로 찾아나간다.
기존 차지했던 영역을 잃어서 다른 요소가 차지하게된다
block 디스플레이는 부모영역만큼 너비가 늘어나지만 absolute는 늘어나지 않는다.
absolute의 크기를 지정해주지 않으면 안에있는 내용만큼의 크기를 갖게된다.
left:0; right:0;   >>> width: 100%와 같다.
top:0; bottom:0; >>> height: 100%와 같다.
inset: 0; 모든 방향에 대해서 0의 위치를 가진다.


6. fixed 포지션
fixed 포지션은 브라우저 화면 기준으로 배치된다.
화면에 고정되는 포지션
absolute처럼 기존 차지 영역이 없어진다.
내비게이션에 자주 사용된다.
absolute와 마찬가지로 크기를 지정해줘야한다.


7. sticky 포지션
브라우저화면을 기준으로 지정한 위치에 도달하면 그 위치에 고정된다.
원래 배치영역을 그대로 차지한다.
원래 위치에 도착하면 다시 기존 위치에 포지션됨
부모 요소 안에 갇혀있다는 특징이 있다. 
부모 요소가 밖으로는 벗어나지 않는다.


8. z-index
앞뒤의 순서(z축)를 정하는 css 속성
z-index가 같을 경우 코드에서 더 아래쪽에 있는 것이 위로 올라간다.