CSS 레이아웃 - Position

 

#POSITION

 

기본적인 흐름에서 벗어나고 싶을때 사용합니다. (기본흐름은 블락, 인라인을 의미합니다.)

가장 많이 쓰는 예시로는 이미지위에 글자 쓰기, 화면상단에 메뉴 고정 같은 것이 있습니다.

포지션 요소에는 다섯가지가 있습니다. 요소에 대해 자세히 알아보죠.

 

*요소를 주면 ‘기준’을 잡는 것입니다.

쉽게 말해, 이미지 ‘기준’으로 위에서 10px에 위치시켜줘 같은 느낌으로 명령하는 것입니다.

position : ~~	원래자리 (기본값-블락/인라인)	static	기본
	지금위치 기준	relative	쉽게 현재위치에서 이동시키기   (얘만 원래자리를 차지 - 유체이탈개념)
	가장 가까운 포지션 기준	absolute	바로 상위 포지션(가장가까운) 기준으로 이동 (relative 필수)
	브라우저 기준 고정시키기	fixed	네비바 만들기
	특정위치에서 고정으로 변경	sticky
	top bottom left right 한번에 조정	inset	inset : 10px

 

position을 통해 ‘기준’을 잡았으면 이제 구체적인 위치를 설정하면 됩니다. 

위치는 top, right, left 등을 통해서 설정하면 됩니다.

특이한 점은 -20px처럼 -를 줘서 배치도 가능하다는 점입니다.

 

1. relative 

원래 있어야 할 위치(static) 을 기준으로 잡고 이동합니다.

아래 박스로 보면, 현재 div이고 포지션은 건드리지 않았기 때문에 static인 상태입니다. 

그래서 기본설정인 block형태로 배열이 되는거죠.

여기에 그린에만 position : relative를 주겠습니다.

그럼 현재 그린이 위치한 기준을 잡고 이동이 가능해집니다. 

top :30px ; left :30px 를 주면, 우측 그림처럼 이동하게 됩니다.

여기서 의문이 하나 생깁니다. 이전에 배웠던 마진과는 무슨 차이가 있을까요? 

마진을 줘봅니다

세번째 그림을 보면, 마진을 줬기 때문에 밑에있는 오렌지와 퍼플이 같이 밀리는 모습을

볼수있습니다.

물론, 이거는 블락이건 인라인이건 동일하게 적용됩니다.

 

정리를 해보면 

포지션을 주면, 현재위치에는 빈 박스가 위치를 대신 차지하게 되고, 원래있던 요소는 유체이탈처럼

여기저기 이동이 가능해지는 것 입니다. 

반면에 마진을 통해서 이동하면, 본체인 몸이 움직이는 거죠.

2. absolute 

빨강 div에 그린 블루 오렌지를 넣었습니다.

현재는 아무것도 포지션이 정해져 있지 않습니다. 

먼저 포지션을 주겠습니다. 그린에 포지션 : relative ; top left를 주겠습니다.

포지션이 생성됐기 떄문에, absoilute를 이제 쓸수있습니다.

블루에 주고 bottom을 주겠습니다.

 

아직까지 개념이 조금 애매한것 같습니다.

이해를 위해 레드에 relative를 주고 변화를 보겠습니다

블루가 레드를 기준으로 이동하게 되죠?

그린 안에 블루가 있지만, 그린은 static 이라서 건너 뛰고, 포지션이 설정된 레드를 기준으로

이동하게 되는 것 입니다.

정리하면, absolute는 앞에 있는거와 무관하게, 포지션이 있는거 기준으로 움직인다! 입니다.

 

하나 더 중요한 점이 있습니다. 

absolute 는 relative와 다르게 기본 자리를 차지하지 않습니다. 유체이탈을 하지 않는다는 말

과 같습니다. 그림에서 주황이 원래 있던 블루 자리로 이동했죠?

블루의 본체 자체가 이동했기 때문입니다.

 

그리고, 다섯번째 그림은 주황과 블루에 width를 제거한 그림입니다.

주황은 block요소 라서 width가 없어도 부모 요소에 꽉차게 출력이 됩니다.

하지만 블루는 absolute 가 적용되어 있어서, 부모의 width를 받지 못하게 됩니다. 독립을 

한거처럼 말이죠.

 

마지막 팁입니다. 

배경을 넣거나 할때, 꽉차게 덮고 싶은 경우가 있죠?

그림을 예시로 들면 그린을 레드에 꽉차게 , 이런 형식으로요

위에서 배운대로 하면, 

레드에 포지션을 주고 (relative)

그린에 absolute, 그리고 top bottom left right : 0 이렇게 주면 꽉차게 됩니다.

위에 0 주는 걸 합쳐서

inset : 0 으로 표현 할 수도 있습니다. 

(10px 같은 걸 주면 마진처럼 활용이 가능하겠죠?)

3. fixed

쇼핑을 하다보면 밑에 장바구니가 계속 따라다니는 걸 볼 수 있죠? 

이건 fixed로 구현 가능합니다.

지금 배우는 포지션 은 ‘기준’을 생각하는게 가장 중요합니다. 

fixed의 기준은 -> 브라우저 입니다.

그래서 요소에 fixed를 주고 top:30px 을 주면 보고있는 창 기준 , 위에서 30px 떨어진 곳에서 고정이 

되는거죠.

이 상태에서는 아무리 스크롤을 해도 빨강 박스는 계속 저 위치에 고정 되어있습니다.

 

참고로 fixed도 absolute 처럼 원래 자리를 차지하지 않습니다. (본체 이동이죠)

 

웹에서 자주 사용하는 네비게이션 바는 

이런 식으로 top : 0 을 통해 만들수 있겠죠?

 

width : 100% 를 넣는 이유는 

fixed는 원래 자리를 차지하지 않고 본체 이동이라고 했죠,

기존 배치에서 완전히 빠지기 때문에 크기를 지정안하면 내용만큼만 크기를 차지합니다.

이를 방지하고 꽉채우기 위해 넣는 것 입니다.

 

마지막 팁으로, 네비바가 본문을 침범하지 못하게 하는 방법입니다.

간단히 

<div> 네비바 

<div> 내용입력 

이렇게 나누고

내용div에 마진 탑을 주면 됩니다.

4. sticky

 

브라우저 보면 이런 형식의 페이지가 많죠? 

주황부분에 광고, 스크롤하면 빨강부분이 네비바로 붙어서 다니는 모습입니다.

이걸 구현해보죠

차이점을 위해 먼저 배웠던 fixed를 사용해봅시다.

red css에 position : fixed ; top : 180px 주겠습니다.

빨강이 저기서 화면을 계속 가리네요

이제 스티키를 적용해보죠

스티키는 스크롤하다 원하는 위치에 다다르면 거기서 부터 고정이 되는겁니다

쉽게말해 원래 static처럼 일반 요소로 작동하다가

설정한 위치가 되면 fixed로 바뀌는 거죠

 

포지션은 fixed 

top: 0 을 통해 맨위에 닿으면 고정되어 따라다니게 만들어줘 를 의미합니다 

(bottom : 10px 같은거로도 조절이 가능하겠죠)

 

특이한 점은 , 특정 위치 도달 전에는 static이라는 거죠

즉, 부모요소에 속해져있습니다

-> 다시 말해 부모요소 까지만 sticky가 작동하고 벗어나면 풀리는거죠(사라지겠죠).

그래서 전체 div 로 감싸야지만 끝까지 네비바가 작동할겁니다.

5. z-index  

문서의 앞, 뒤 / 즉 보이는 순서를 설정해주는겁니다.

코드는 기본적으로 밑에 있는게 먼저 보입니다.

레드 - 블루로 작성하면 블루가 레드를 이기죠. 

이걸 조절하기 위해 z-index를 사용합니다.

z-index : 1  이런식으로 쓰게 되는데, 숫자가 낮을수록 앞에 위치하게 됩니다 (강력)

(참고로 -1 처럼 - 도 가능합니다)