제작 중 앱에서,
사진을 올리고 그 자리에서 미리보기하는 기능을 구현하는 동안,
z-index를 오랜만에 사용했으므로,
비망록도 겸하고, 자쿠와 소개합니다.

해결하고 싶은 일

아래와 같이 사진이 오면 문자가 테두리 밖으로 튀어 나옵니다.

<완성형>

사진은 텍스트 위에 올라갑니다.

z-index 속성

상자의 겹치는 순서(우선 순위)를 결정할 수 있는 속성입니다.
값은 정수이며 큰 값이 앞에 표시됩니다.

css를 기술한다.

첫째, 텍스트는 사진 아래에 들어가기를 원하므로,
z-index의 값은 0입니다.

sample.scss

.text {      // ⬅️テキストが入っているクラス
  z-index: 0;   
  font-size: 16px;
}

그런 다음 사진이 텍스트 위에 겹쳐지기 때문에
z-index의 값을 1로 설정합니다.

sample.scss

.img {      // ⬅️写真
  z-index: 1;   
  height: 145px;

}

끝입니다.

※ 사진 하부에 있는 「삭제」의 요소는 이번 기사와는 관계 없습니다.
봐 주셔서 감사합니다.