티스토리 뷰
📌 z-index
● 특징: z-index 의 크기가 클수록 층이 더 생긴다고 생각
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0px;
}
.bg {
width: 100vw;
height: 100vh;
background-color: black;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
z-index: 1;
}
.modal {
width: 200px;
height: 100px;
background-color: white;
border: 1px solid lightblue;
border-radius: 14px;
position: fixed;
z-index: 1; /*z-index가 있는경우 가장 위로 올라간다*/
top: 50%;
left: 50%;
transform: : translate(-50%, -50%);
padding: 20px
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<div class="bg"></div>
<div class="modal">
정말 삭제하시겠습니까?
<button>취소</button>
<button>삭제</button>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum aliquid perspiciatis nihil beatae dolor sint assumenda adipisci, corrupti, unde minima ducimus cum dolorum odit, veniam
excepturi. Unde placeat cum iure?
</p>
</body>
</html>'css' 카테고리의 다른 글
| [CSS} SASS 학습 (0) | 2023.01.24 |
|---|---|
| [CSS] POSITION 학습 (0) | 2023.01.16 |
| [CSS] 가상 요소 (0) | 2023.01.16 |
| [CSS] 가상클래스 (0) | 2023.01.15 |
| [CSS] 선택자 (0) | 2023.01.14 |