Z-index

Juyeon Lee·2022년 2월 11일
0

CSS

목록 보기
25/32

사진 밑에 동그랗게 배경화면?을 만들어줄 때
z-index라는걸 쓰면 된다고 한다.

elements that have a higher value of the index will appear first (on top)

value가 높으면 앞에 나오는데

이렇게 현재 동그란애가 벨류가 더 높아서 올라온 상태이므로
벨류를 z-index이용해서 줄여준다..이렇게

z-index: -1;

아니면 이미지 밸류를 높여줘서 앞으로 나가게 해준다.
이렇게

.step-img {
  width: 35%;
  z-index: 10;
}

이렇게 다른 하나의 원을 만들어주고 z-index 해주었더니

.step-img-box::after {
  width: 50%;
  padding-bottom: 50%;
  background-color: #fae5d3;
  z-index: -1;
}

이 결과가 나오게 되었다!

0개의 댓글