[css]position : relative / inset : 0

relative

이름과 같이 절대적인 위치에 둘 수 있다.

부모를 기준으로 이동합니다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모를 기준으로 절대적으로 움직이게 된다.
이걸 따로 정리하는 이유는, detail 페이지를 만들면서 제일 바깥의 div의 속성으로 backgroundimage로 바닥이미지를 깔고, 위에 레이어로 backdrop-filter:blur(10%) 을 해서 올리고, 그 위에 또 다른 image가 올려졌으면 했다.

아래는 해당 코드이다.

<div className="detail">
      <div
        className="detail_bg"
        style={{
          backgroundImage: `url(${BaseUrl}${item.backdrop_path})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center top',
          width: '100%',
        }}
      >
        <div className="detail_cont">
          <span className="img">
            <img src={`${BaseUrl}${item.poster_path}`} alt="" />
          </span>
          <div className="detail_info">
            <h3 className="title">
              {item.title || item.name || item.original_title}
            </h3>
            <div className="info">
              info
            </div>
          </div>
        </div>
      </div>


.detail_bg {
    position: relative;
    padding: 100px 0;
    border-bottom: 1px solid $dgrey;
    &::before {
      position: absolute;
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(
        270deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.7) 51%,
        rgba(0, 0, 0, 1) 100%
      );
    }

    .detail_cont {
      position: relative;
      left: 50%;
      width: 80%;
      padding: 20px;

      .img {
        display: block;
        width: 300px;
        img {
          width: 300px;
        }
      }
    }
  }

여기에서 문제가 됬던 부분이 detail_cont 였다. absolute를 하면 임의로 detail_bg에 높이 설정을 해주던가 해야지 안 그러면 max-content만큼으로 높이값이 줄어든다. 이를 방지하기 위해 detail_cont에 absolute가 relative를 해주고 위치값을 설정했다.

relative는 반드시 자식요소 (absolute)가 있을 때만 사용하는 게 아니다. 본인의 위치값을 지정할 때도 사용이 가능하다.
detail_cont를 absolute로 잡으면, 위치는 잘 잡히나 내부 컨텐츠의 높이를 감지 하지 못해서 푸터와 겹치는 등 의도치 않은일이 발생할 수 있다.
relative로 하면 해결되나 대신, 딱 컨텐츠 높이만큼 감지하기때문에
top 속성대신 부모컨테이너에 패딩을 줘서 세로정렬 하자. 해당개체에 직접 마진을 줘버리면 컨텐츠 영역 자체가 밀리는 경우가 생길 수 있다.

height 값

• height 값 100%는 부모태그의 값에 영향을 받고 auto는 자식태그의 값에 영향을 받는다.
• 하위 div 가 absolute에 height지정 안되었다면 상위 div의 height는 0. (하위 div내에 이미지가 있어도)
• 하위 div 가 relative라면 상위 div의 height는 하위 div의 컨텐츠 height와 동일하다.

inset

top, left, bottom, right 의 값을 가진다.
0으로 표기했을 경우, 화면 전체의 너비와 높이값을 가지게 된다.