[CSS]position

각각의 엘리먼트의 위치를 지정하는 방법이 4가지가 있다. 

1.static

2.relative

3.absolute

4.fixed

 

static vs relative 

 

이렇게 생긴 레이아웃에서 me를 왼쪽으로 100px, 위쪽으로 100px 움직여 볼 것이다.

 

이렇게만 해서는 움직이지 않는다 position:relative; 를 줘야한다.

bottom과 top이 있으면 top이 우선

left와 right가 동시에 있으면 left가 우선

 

css의 postion의 기본값은 static이다. (원래 위치해야 하는 그곳에 정적으로 위치한다)

그래서 상대적으로 상하좌우로 이동시키고 싶으면 position을 relative로 지정해줘야 한다.

 

position type이 relative일 때 off-set을 사용할 수 있다 !(중요!)

 

 

절대 포지션 : absolute

html 앨리먼트를 기준으로 위치를 지정하고 싶을 때가 있다. 그때 사용하는게 absolute

만약 left와 top을 기준으로 하지 않고, absolute만 하면 부모 앨리먼트의 위치를 기준으로 위치가 생긴다.

현재 부모 앨리먼트는 parent이기에 parent 기준으로 me의 위치가 생성된다. (부모 앨리먼트 기준으로 바로 아래!)

기본값은 자기가 원래 있기로 기대된 곳이라 생각하면 된다. 

 

만약에 relative를 기준으로 하면 부모 앨리먼트를 기준으로 위치가 잡히기 때문에

위에서 absolute로 me 선택자를 지정했는데 만약에 position을 absolute로 지정하면 이제 더이상 부모의 소속이 아니다.

즉, parent 소속이 아니게 되는 것이다. 그러면서 부모와 무관해진다.

그래서 

이런식으로 me만 크기가 동떨어진 이유는 부모와의 연결이 끊기면서 부모의 width만큼을 지정하지 못하고

자기의 컨텐츠 영역만큼 크기를 지정하기 때문에 크기가 동떨어진 것 처럼 보이는 것이다.

 

만약에 parent의 포지션을 relative로 바꾸면

me는 parent의 포지션에 맞게 자신의 위치를 지정한다.

 

즉, 자식 앨리먼트가 absolute로 지정되어 있을 때

부모앨리먼트가 static ->	html을 기준으로 자식 앨리먼트 위치 지정
부모 앨리먼트가 absolute ->	부모의 위치를 기준으로 자식 앨리먼트 위치 지정

 

 

relative -> 부모를 기준으로 하여 위치가 정해짐 

absolute-> 부모 중 포지션 타입이 지정된 부모를 기준으로 위치가 정해짐

부모와의 연결이 끊어지기 때문에 자식은 자식의 컨텐츠만큼 영역이 정해지고, 부모도 자식을 모른체 한다. 

 

https://88240.tistory.com/241

https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4

CSS position absolute, fixed 차이

 

fixed

 

fixed는 스크롤과 무관한 앨리먼트를 고정시켜야 할때 사용하면 준다. 

스크롤을 내리면 

me가 여전히 살아있다!

 

fixed도 absolute와 비슷한게 width나 height를 지정하지 않으면 자신의 컨텐츠 크기만큼의 영역만 갖는다.

width:100% 이런식으로 하면 가로 꽉차게 me의 영역이 설정된다.

뿐만 아니라 fixed 앨리먼트의 부모도 자식과 연결이 끊겼기에 부모의 크기를 자식도 갖지 못한다.

 

 

https://keichee.tistory.com/277

[CSS] 포지션(position) 속성 강좌