[TIL] CSS Break down (Position)

Position⏹

포지션이란, 말 그대로 위치를 의미한다. 아래는 position의 속성 값들.

아래에서는 다양한 결과를 보기위해 모든 박스의 width,height를 100px로 주었다.

1. static

따로 입력을 하지 않은 이상 default로 static이 적용이 된다. 즉, 코드를 입력한 순서대로 주루루룩 위치가 지정된다.

<!-- default는 static! -->
<div>주</div>
<div>루</div>
<div>룩</div>

2. relative

위치를 잡아주는 것이기에 움직인다는 표현이 엄격하게 맞지 않을 수 있지만, 쉬운 이해를 위해😁

말 그대로 상대적인 위치를 의미한다. 그렇다면 기준점이 필요한데, 그것이 바로 자기자신!이다. 기본적으로 static으로 주루루룩 쌓인 자기의 위치가 있을것이다.
바로 그 위치를 기준으로 상대적으로 움직일 수 있다.

top : 위에서 아래로 움직인다.
bottom : 아래에서 위로 움직인다.
left : 왼쪽에서 오르쪽으로 움직인다.
right : 오른쪽에서 왼쪽으로 움직인다.

원래 생성된 내 위치에서 움직이는 걸 볼 수 있다.

.box {
  position: relative;
  top: 50px;
  left: 80px;

relative다음에 오는 박스는 relative의 자리를 알고있다.

이처럼 BOX 3이 BOX 1바로 밑에 오는게 아니라 BOX 2의 자리를 알고 있어서 BOX 2의 원래 자리 그 다음에 위치한다.

3. absolute

말처럼 절대적인 위치를 의미한다. 앞서서 어떤 요소가 쌓여있던간에 무시하고 body를 기준으로 자신의 위치를 잡는다.(웹을 열면 화면이 딱 시작하는 좌상단이라고 생각하면 된다.) 뷰포트와 헷갈리면 안된다!!! 뷰포트를 기준으로 절대적인 위치를 주는 것은 fixed나 sticky정도가 되겠다.

<div class="box1">무시하지마</div>
<div class="box2">싫어</div>
<div class="box3">나는?</div>

.box1 {position:static;}

.box2 {
  position: absolute;
  top: 30px;
  left: 80px;
}
.box3 {position:static;}

이처럼 주루룩 쌓이지 않고 absolute로 위치를 지정해주니 body를 기준으로 위에서 30px, 왼쪽에서 80px이 떨어진 곳에 위치한다. 추가로 그 다음에 쌓이는 박스는 box1다음에 쌓이는 것을 볼 수 있다.

절대적인 위치이면서 body기준으로 위치를 잡는다고 하였는데, 예외가 있다.
바로 relative이다. 그냥 relative가 아닌 부모의 relative 이다!!!
형제중에 relative가 있다하더라도 relative가 있는 형제를 기준으로 잡지 않는다.
하지만 이 역시 정확한 개념은 아니다.

더 정확히 말하면 가장 가까운 상위 요소중의 relative 를 기준으로 잡는다.

<부모>
  <자식>  
    <자손></자손>
  <자식>
</부모>

위와 같은 상황에서 자손에게

/*  박스의 크기는 100px*100px */
position: absolute;
top: 100px; 
left: 100px

을 줄 것이다.

1. 부모 : relative 자식 : static 자손 : absolute
   • 자손은 부모를 기준점으로 잡는다.

부모를 기준으로 100px씩 이동했다.

2. 부모 : relative 자식 : relative 자손 : absolute
   • 자손은 자식을 기준점으로 잡는다.

자식을 기준으로 100px씩 이동했다. (자손의 입장에선 자식이 부모임!!)

3. 부모 : static 자식 : static 자손 : absolute
   • 자손은 body를 기준점으로 잡는다.

body를 기준으로 100px씩 이동했다. 1번과 다를게 없어 보이지만, 이는 부모의 위치가 현재 body에서 제일 첫번째로 쌓인 박스이기 때문에 그렇게 보이는 것이다.

실습을 하던중 알게되었는데, relative뿐 아니라, absolte도 기준으로 잡더라.
하지만 내 생각에 absolte는 절대적인 위치+relative를 기준으로 잡는 녀석이기에, 기준점을 잡알 줄때에는 쓰지 않는것이 좋아보인다.

4. fixed

• viewport와 연관이 있는 속성이다.
• 스크롤이 되더라도 사용자에게 이 부분만큼은 계속 보여졌으면 하는 부분을 fixed로 고정시켜주는 것이다. 스크롤을 아무리 내려도 지정해준 위치에서 움지이지 않는다!
• 위치를 지정하지 않으면 원래의 자기위치에 고정이 된다!

(fixed의 상위호환 느낌인 sticky와는 조금 다르므로 그 감각을 직접 느껴보면 좋다.)

아무런 position을 지정하지 않은 기본의 화면이다.

이제부터 BOX 4에 fixed를 줄 것이다.

fixed를 주니 BOX 4를 인지하지 못하는 p를 볼 수 있다.

스크롤을 내려도 BOX 4는 원래의 자기 자리에 있다.

이제 BOX 4에 top:0; left:100px;의 속성과 값을 줄 것이다.

viewport를 기준으로 위에서 0, 왼쪽에서 100px인 자리에 딱 고정되어 있는것을 볼 수 있다.

✅ 끝으로

레이아웃을 잡을 때에 정렬이나 위치 조정은 매우 중요하다. 또한 고정을 해주는 것은 검색 엔진이나 챗봇, 상위로 가기 버튼, 다크모드로 전환 버튼 등등 쓰임새가 많다. 헷갈리지 말고 잘 알아두어야 한다. 그리고 sticky의 경우 비교적 최신 기술이어서 벤더 프리픽스를 줘야 한다.

position: -webkit-sticky;
position: sticky;```

vendor prefix란 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

>참고 사이트

• 벤더프리픽스

http://tcpschool.com/css/css3_module_vendorPrefix