티스토리 뷰

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

h1 {

background-color: silver;

}


p {

border: 1px solid red;

padding: 10px;

width: 80px;

height: 80px;

position: absolute; /* 절대위치 */

}


.box1 {

background: yellow;

top: 100px;

left: 100px;

z-index: 1; 

}


.box2 {

background: orange;

top: 120px;

left: 120px;

z-index: 2;

}


.box3 { 

background: teal; 

top: 140px;

left: 140px;

z-index: 3; 

}

</style>

</head>

<body>

<h1>박스의 겹치는순서 지정하기</h1>

<p class="box1">박스 1</p>

<p class="box2">박스 2</p>

<p class="box3">박스 3</p>

</body>

</html>


박스의 겹치는순서 지정하기

박스 1

박스 2

박스 3


TAG
,
댓글
댓글쓰기 폼