위치 속성 예제 2
색이 다른 세개의 박스 위치 다르게 지정하기
- z-index 속성
z-index:9;
박스의 위로 올라오는 순서를 정하고 싶을 때 사용
값을 주는 방법 예) 9/99/999
★기본값:1 모든 요소를 덮어버림 (많이 쓴다.)
<!DOCTYPE html>
<html lang="ko">
<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>위치속성 예제</title>
<style>
.pbox {
position:relative;
width:700px; height:280px; padding:50px;
border:solid 3px #000;
overflow : hidden; /*박스 영역 밖으로 벗어난 컨텐츠를 안보이게 지정*/
}
.box01 {
position:absolute;
width:200px; height:200px;
left:20px; top:20px;
background:red;
}
.box02{
position:absolute; left:100px; top:100px;
width:200px; height:200px;
background:green; z-index:9;
/* 값을 주는 방법 예) 9/99/999*/ /*★기본값:1 모든 요소를 덮어버림 (많이 씀)*/
}
.box03{
position:absolute; left:200px; top:200px;
width:200px; height:200px;
background:blue;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div class="pbox">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
- fixed 속성
position:fixed;
원하는 태그를 고정 시키는 역할이다.
<!DOCTYPE html>
<html lang="ko">
<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>위치속성 예제</title>
<style>
.pbox {
position:relative;
width:700px; height:150px; padding:50px;
border:solid 3px #000;
overflow : hidden; /*박스 영역 밖으로 벗어난 컨텐츠를 안보이게 지정*/
}
.box01 {
position:absolute;
width:200px; height:200px;
left:20px; top:20px;
background:red; z-index:999;
}
.box02{
position:absolute; left:100px; top:100px;
width:200px; height:200px;
background:green; z-index:99;
/* 값을 주는 방법 예) 9/99/999*/ /*★기본값:1 모든 요소를 덮어버림 (많이 씀)*/
}
.box03{
position:absolute; left:200px; top:200px;
width:200px; height:200px;
background:blue; z-index:9;
}
header {
position:fixed; left:0; top:0;
width:100%; height:70px;
background: #000;
}
</style>
</head>
<body>
<header></header>
<h2>Lorem ipsum dolor amet</h2>
<div class="pbox">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
> header가 box를 덮게 만드려면 z-index 를 사용해야함
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| 배경 속성 (1) | 2022.09.30 |
|---|---|
| [HTML+CSS3] 위치 속성 2 (0) | 2022.09.29 |
| [HTML+CSS] 위치 속성 예제 1 (0) | 2022.09.29 |
| [HTML+CSS3] 위치 속성 (0) | 2022.09.29 |
| [HTML+CSS3] 글자 속성 (0) | 2022.09.28 |