[CSS] position값에 따른 width, height 값 설정(Feat. z-index)

글을 쓰는 이유

프론트앤드 개발을 하다가 보면 제일 힘든게 CSS가 아닌가 싶다..😂
내가 생각한 대로 잘 움직이지 않고 자꾸 이상한 괴물을 만들어낸다.
예전에 프로젝트를 진행하면서 프론트엔드를 맡아 개발한 적이 많이 있다.
제일 힘들었던 부분이 width, height 값이 내가 생각했던 것 처럼 설정이 되지 않는다는 것이었다. 그래서 공부를 통해 해결했었지만 자꾸 까먹는다.
머릿속에 저장이 잘 되지 않아 적어본다..🥺

1. position: static

position의 default 값

기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

( 추가 MEMO👀 ) z-index도 static에서는 적용되지 않는다.

위의 내용으로 position: relative와 동일한 특성을 가지고 있다는 것을 알 수 있다. 그럼 position: relative 와 다른 점은 무엇인가?

2. position: relative

position: static과 다르게 기존 위치를 기준으로 좌표 프로퍼티 를 이용할 수 있다.

👽 좌표 프로퍼티란? top, bottom, right, left 값을 말한다.

position: static과 같이 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

여기에 더해서 좌표 프로퍼티를 이용하여 위치 지정을 할 수 있다는 점이 static과 relative의 차이점이 되겠다.

3. position: absolute

기존 엘리먼트의 흐름에서 벗어나 static이 아닌 가장 가까운 부모 요소를 기준으로 위치가 결정된다.

즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.

따라서 부모 요소를 위치 지정의 기준으로 삼고 싶다면 부모 요소의 position 값을 static에서 relative로 바꿔야한다.

4. position: fixed

부모 요소와는 관계 없이 viewport를 기준으로 좌표 프로퍼티를 이용하여 위치를 옮길 수 있으며, 스크롤로 인해 없어지지 않고 고정되어 있다.

fixed는 absolute와 동일하게 block 요소의 width가 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

5. position값에 따른 width, height 값의 원리

width, height 값은 절대 상속되지 않는다.

• absolute, fixed 사용 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

• relative 사용 시, width를 따로 지정해주지 않는다면 width 값은 부모요소의 100%로 지정되며, height 값은 content에 맞게 변화된다.

• static은 relative와 동일하다.

6. position 값에 따른 z-index 관련 이슈

position: static인 요소와 static이 아닌 요소가 겹치면 static인 요소가 덮어 씌어진다.

이 상태에서 static인 요소의 우선순위를 제일 높게 하기 위해 z-index를 더 높게 해준다면? 당연히 적용되지 않는다.

static은 z-index 프로퍼티가 적용되지 않기 때문에 position 값을 relative로 바꿔주어야한다.

7. top, left 값 사용에 대해 추가(실제 프로젝트 중 해결한 이슈에 대한 기록)

<!--html-->
<section class="scroll-section" id="scroll-section-0">
	<h1>Air Pro</h1>
	<div class="sticky-elem sticky-elem-canvas">
          <canvas id="video-canvas-0" width="1920" height="1080"></canvas>
	</div>
</section>

.sticky-elem {
  position: fixed;
  width:100%;
}

.sticky-elem-canvas {
    top:0;
    height: 100%;
}

.sticky-elem-canvas canvas {
    position: absolute;
    top: 50%;
    left: 50%;
}

canvas의 top, left값을 조정하기 위해 position 값을 absolute로 지정하였다. sticky-elem 클래스의 position 값이 fixed이므로 canvas의 부모 요소는 sticky-elem 클래스의 요소가 된다. 따라서 위치 지정을 위한 좌표 프로퍼티는 부모 요소의 위에서 적용된다.

부모 요소는 fixed이기 때문에 별다른 값을 지정해주지 않으면 width height 값은 content의 크기로 결정되는데, width:100% 로 임의로 지정해주었다. 또한 height 값을 100%로 해주었는데 이 이유는 좌표 프로퍼티인 top, left 값이 그 안에서 적용될 수 있도록 하기 위함이다.

canvas또한 absolute이기 때문에 width 값은 content의 크기로 결정 된다. 여기선 별다른 지정을 해주지 않았다.