z-index
z-index 속성은 어느 요소가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다. static을 제외한 position 속성이 적용된 요소에서만 작동한다.
- 미적용 시 가장 마지막에 작성한 요소가 가장 상위에 배치된다.
- 양수, 음수 입력이 가능하며 값이 클수록 상위에 배치된다.
| 속성 값 | 설명 |
|---|---|
| auto | z-index를 지정하지 않은 값(기본값) |
| number | 배치 순서를 결정, 클수록 상위에 배치 |
| initial | 기본값으로 설정 |
코드 상 나중에 입력한 순서대로 맨 위에 배치된다.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.x {
background-color: red;
top: 20px;
left: 60px;
}
.y {
background-color: tomato;
top: 50px;
left: 20px;
}
.z {
background-color: orange;
top: 80px;
left: 50px;
}
</style>
</head>
<body>
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</body>
</html>
x와 z 요소에 z-index 값을 지정하며 배치 순서를 변경하였다.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.x {
background-color: red;
top: 20px;
left: 60px;
z-index: 10;
}
.y {
background-color: tomato;
top: 50px;
left: 20px;
}
.z {
background-color: orange;
top: 80px;
left: 50px;
z-index: -1;
}
</style>
</head>
<body>
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</body>
</html>
overflow
overflow 속성은 자식 요소가 부모 요소의 영역을 벗어났을 때 처리하는 속성이다.
| 속성 값 | 설명 |
|---|---|
| visible | 영역을 벗어난 부분을 표시(기본값) |
| hidden | 영역을 벗어난 부분을 잘라내어 보이지 않게 함 |
| scroll | 영역을 벗어난 부분이 없어도 스크롤 표시 |
| auto | 영역을 벗어난 부분이 있을 때만 스크롤 표시 |
<html>
<head>
<style>
div {
width: 200px;
height: 170px;
border: 1px solid black;
margin: 40px;
padding: 5px;
float: left;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<h1>overflow</h1>
<div class="visible"><h3>visible</h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis libero maxime assumenda repellat eaque voluptas amet pariatur ipsum ipsam, dolore soluta! Doloremque?
</div>
<div class="hidden"><h3>hidden</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, esse aliquam ex laboriosam nisi, atque modi eveniet, quae excepturi quaerat inventore voluptatum?
</div>
<div class="scroll"><h3>scroll</h3>
Lorem ipsum dolor sit amet.
</div>
<div class="auto"><h3>auto</h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat asperiores maiores officiis sunt reiciendis, eaque beatae similique omnis, earum quae enim repellendus!
</div>
</body>
</html>
반응형
'CSS' 카테고리의 다른 글
| [CSS] Float (33) | 2022.03.10 |
|---|---|
| [CSS] Position (18) | 2022.03.08 |
| [CSS] 타이포그래피 (1) | 2022.03.06 |
| [CSS] Text (4) | 2022.03.05 |
| [CSS] Font (3) | 2022.03.05 |
댓글