[CSS실습] 04 - Position
Position은?
요소를 원하는 위치에 자유롭게 이동시키기위해서 사용하는 속성(Property)
position속성은 요소에 사용될 위치 확인 방법의 타입을 지정한다.
총 5가지의 종류가 있다.
static / relative / absolute / fixed sticky<- 지원하는 브라우저가 많이 없어서 skip하겠다.
+
z-index
간단정리:
내가 만약 viewport를 기준으로해서 옮겨야하는가? -> fixed
내가 이 요소로 완전히 이 맥락에서 띄워내서 다른 위치로 옮겨야하는가? -> absolute
아니면 원래 자기가 있던 위치를 유지를 하면서 조금조금 옮기고 싶은가? -> relative
Position을 공부할때는 2가지에 대해서 꼭 ! 생각하자.
Type -> 기준점
기준점이 각각의 Position Type에 따라서 많이 달라진다.
내가 어떤 종류의 Position을 사용하고있는지 ? 그래서 내가 사용하고있는 Positon은 무엇을 기준으로 요소를 위치시키는지?
Position - static / relative
static - (가장 일반적인 상태) 어떤 요소든지간에 모든 요소의 Position은 기본적으로 static이다!
relative -
1. 얘의 기준점은?
본래 있던 자기 자리( 자신이 원래있던 위치에 대해서는 기억하고있다.)
예) float는 완전히 집나간 자식이였는데, postion의 relative같은 경우에는 붕~떠서 집은 나갔지만 그래도 가족 구성원으로써 해야할일은 하고있다는 그런 느낌.. ? 그래서 float처럼 막 형제요소들이 막 앞으로가서 레이아웃이 밀려나는게 아니라 그냥 원래있던 상태 그대로 있는것이다.
❗❗❗ Position - absolute
우리는 Position absolute를 사용하는 순간 여러가지 현상들이 발생하는데, 근데 이게 float를 사용했을때와 동일한 것이 굉장히 많다
#1 집 나간 내 새끼, 찾을 길 없네
#2 블록으로 신분상승
#3 길막을 못해 슬픈 블록아!
#4 플로트, 나만 볼 수 있어요(feat.인라인)
float를 사용하면 위의 4가지 일들이 일어났었는데,
그 중 #4 번빼고, 동일한 현상이 position absolute를 사용하면 나타난다.
이렇게 absolute를 사용하면 많은 변화들이 동시다발적으로 일어난다는 것을 확인했다.
그럼 absolute는 무엇은 기준으로 삼아서 요소를 위치시킬까?
absolute는 자신이 기준으로 삼고싶은 기준점을 새롭게 정할 수 있다.
float의 경우는 어찌됐던 자신을 감싸고있던 부모에게 철저히! 종속적이였었다.
이에 반해 absolute는 자신을 감싸고있는 여러조상중에서 자기가 기준으로 삼고싶은 요소를 선택할 수 있다는 점에서
굉장히 특이하다. <- 이점이 사실 absolute가 막강해지는 것이다.
그럼 이 선택의 기준이 무엇일까?
바로, position이 static이 아닌 요소인 경우, 그 요소를 기준으로해서 자기자신을 위치시키는 것이 바로 position의 absolute이다. (즉, 부모가 position:static기준으로는 위치를 잡을 수 없다)
아래 예시를보자
빨강이한테 position : absolute를 주겠다. 그럼 붕~뜨게될텐데 그럼 얘는 본능적으로
누구를 기준으로 자신을 위치시켜야하는지 그 기준점을 찾기 시작할 것이다.
아무래도 순서가 있으니까
1. 부모요소를 확인한다. 근데 부모 요소의 position값을 확인하니까 static이다.
근데 pisition이 static으로는 기준을 잡을 수 없다. 그래서 과감히 Pass한다!
2. 그래서 다음으로 부모를 감싸고있는 할머니요소를 확인한다.
그랬더니 position이 relative | absolute | fixed | sticky이더라.
그래서 빨강이는 할머니의 왼쪽 모서리를 기준으로해서 자기자신을 위치 시킬 수 있게되는 것이다.
그래서 position : absolute를 사용할때는 어떤 조상 요소를 기준으로 움직일것인지에 대한 기준점 설정이 반드시 필요하다.
그때 만만하게 사용할 수 있는것은 position: relative 이다.
가령, 기준점을 준다고치고 absolute를 사용하게된다면.. 그럼 그 조상요소도 또! 기준점을 잡아야되니까 또 자기의 기준점을 찾아야되니까 absolute인셉션이 일어난다 🤣
따라서 주변 요소한테 아무런 영향도 끼치지 않는 position : relative를 사용해서 absolute의 기준점을 잡아주는 것이
아무래도 현명하다.
할머니 요소를 기준으로 20px씩 움지이는 빨강이를 확인할 수 있다.
즉, 다시한번 정리하자면,
position : absolute 같은경우는 자신의 조상요소중에 position:static이 아닌 요소를 기준으로잡으니까
position : absolute를 사용할때는 기준점을 설정해주고, 그다음내가 원하는 위치에 옮겨야지 ~
라고 연습을 하면 쉬워진다!
Position - fixed
position : absolute를 사용했을때랑 완전히 동일한 현상이 일어난다.
그래서 fixed된 요소가
blockBox가 된다던가,
별도의 width를 명시하지않으면 자기의 콘텐츠사이즈만큼 줄어드는 그런 길막할수없는 block,
집나간 자식이 된다는것.. 모두 다 동일한 현상이 일어난다.
하지만 크게 달라지는 부분이 있다면,
fixed는 자신의 기준점이 명확하게 정해져있다는 것이다!
바로 *viewport(브라우저 창의 전체크기)* 사이즈를 기준으로 자신을 위치 시키게된다
더 자세히 보기위해 body에 3000px을주고 모바일 화면으로봤는데, 마찬가지로 viewport기준으로해서 bottom에서 0px만큼 떨어져있게 되는것이다
이렇게 포지션의 여러 타입에 대해 공부를 하였다.
그리고 각각의 포지션이 어떤것을 기준으로 삼아서 움직이는지에 대해서도 꼼꼼히 살펴보았다.
하지만 어떤 포지션에대해서 쓸건지에 대해 선언을 했다고해서 요소가 우리마음을 읽어서 이동하지않듯이,
position을 선언을했으면 내가 어디에 그 요소를 움직일 것인지에대해 옮겨야 할 위치를 알려주는 것이다!
이때 사용하는 CSS propertis가 top, right, bottom, left라는 속성이다.
근데 여기서 굉장히 중요한 포인트가있다!
가로 방향중에 left와 right중 하나 / 세로 방향중에 top bottom중 하나만 사용하는것이 정신건강에좋다!
Position - z-index
position된 요소들의 수직방향성으로써의 레벨/위치를 알려주는 것인데,
position:static을제외한 나머지 pisition타입을 사용하게되면 어쨌든 요소를 붕~띄운다는것은 다 똑같다.
왜냐하면 pisition:relative같은 경우에도 자기자신의 위치를 기억한다는 것 뿐이지
붕뜨는것은 마찬가지이다. 그럼 , absolute, fixed 또한 그렇다.
그럼 어찌됐던 수직방향으로 붕~뜨게되는데,
그럼 위와같이 z-index라는 레벨이 생긴다.
이게뭐냐면, css를 하다보면 z축으로 내가 몇번째 레벨에 있느냐 라는 값을 설정해주는게 중요할 때가 생긴다.
가령 빨강이가 초록이를 살짝 덮었으면 좋겠는 경우가 있다. 그럼 이 빨강이는 초록이보다 z축으로 쫌 더 위쪽으로 있어야할텐데 이럴경우에 우리가 z-index에다가 값을 정수값을 적어주는데,
바로 아래처럼 초록이처럼 z-index:1을 주고, 빨강이한테 z-index:2를 주면 2층에 있으니까 당연히 1층을 덮는다.
이런식으로 사용하는것이 바로 z-index이다.
결론 :
float를 언제 사용해야하는지 position을 언제 사용해야되는지 구분이 되는가?
float는 두개의 요소를 나란히 놓기 위해서 즉, 가로배치를 하기위해서 사용한다면,
position은 어떤 특정위치에 딱! 옮기거나 고정시키고싶을때 이렇게 사용하면된다.
참고자료 :
attribute와 property가 헷갈릴때 참고하기 좋은 블로그