728x90
반응형
15_zindex.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/15_zindex.css";
</style>
</head>
<body>
<div id="cont1">
<h1>A</h1>
</div>
<div id="cont2">
<h1>B</h1>
</div>
<div id="cont3">
<h1>C</h1>
</div>
</body>
</html>
15_zindex.css
@CHARSET "UTF-8";
h1{
font-family: Arial;
font-size: 60px;
font-weight: bold;
text-align: center;
}
div{
width: 200px;
height: 150px;
margin: 10px 5px;
padding: 20px;
border: 1px solid black;
color: yellow;
}
#cont1{
position: absolute;
left: 10px;
top: 10px;
background: red;
z-index: 1;
}
#cont2{
position: absolute;
left: 180px;
top: 20px;
background: green;
z-index: 3;
}
#cont3{
position: absolute;
left: 25px;
top: 160px;
background: blue;
z-index: 2;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-17. clear (0) | 2017.08.28 |
|---|---|
| [CSS] ch04-16. float (0) | 2017.08.28 |
| [CSS] ch04-14. visibility (0) | 2017.08.28 |
| [CSS] ch04-13. fixed (0) | 2017.08.28 |
| [CSS] ch04-12. absolute (0) | 2017.08.28 |