불투명 배경 위에 모달창 만들기

투명(opacity) 속성 속성 상속되는 문제

투명값을 Opacity속성으로 주지 말고
rgba값으로 준다

background-color: rgba(0, 0, 0, 0.4);

오버레이 배경이 다른 컨텐츠 밑에 가려지는 문제

(다른 요소 속성 : fixed)

fixed : top
z-index : 20

전체코드

 <!-- navbar 영역 -->
    <div w3-include-html="./../component/gnb-ic1.html"></div>

    <div class="container bg-light all-wrap-grow" id="all-container" style="clear: both">
      <p class="sub-title">내가 쓴 글</p>
      <!-- 리스트 아이템 시작 -->
      <div class="my-list d-flex flex-row" id="recent-list">
        <div class="list-pic">
          <img src="${data.image}" />
        </div>

        <div class="flex-fill position-relative ms-2">
          <div class="position-absolute end-0">
            <img class="position-absolute end-0" src="./../img/icon/three-dots-vertical.svg" />
            <div class="bg-secondary">box</div>
          </div>
          <p class="m-0"><small> ${datejs.format('M월D일 HH:mm')} </small></p>
          <p class="m-0">${data.title}</p>
          <div class="hstack">
            <span class="m-0 fw-bold">${data.price}원</span>
            <div class="ms-auto">
              <img class="" src="./../img/icon/heart.svg" />
              <span class="m-0 text-muted"><small>12</small></span>
              <img class="" src="./../img/icon/chat.svg" />
              <span class="m-0 text-muted"><small>12</small></span>
            </div>
          </div>
        </div>
      </div>
    </div>

#modal-overlay {
  position: fixed;
  z-index: 20;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  float: left;
}