티스토리 뷰
<!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
'java,web study > 5주차 (7월 29일~8월 4일)' 카테고리의 다른 글
| css로 문자 정렬하기 (0) | 2013.08.01 |
|---|---|
| font를 이용한 단축 표현 (0) | 2013.08.01 |
| '>' 식별자 사용(자손) 테이블 속성 스타일 바꾸기 (0) | 2013.07.31 |
| 스타일로 입력폼 만들기 (0) | 2013.07.31 |
| 자손과 후손 예제 (0) | 2013.07.31 |
댓글