티스토리 뷰
<!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 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 자바
- ERP
- 메모장
- 아두이노
- 클래스
- 충북대
- 정보
- SVN
- 오라클
- 청주
- 안드로이드
- 데이터베이스
- SQL
- 배열
- db
- 소켓
- 이론
- 알고리즘
- 정렬
- 잡담
- JQuery
- HTML
- 자바스크립트
- 파이썬
- 졸업작품
- jsp
- 게임
- 프로젝트
- 도전과제
- CSS
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
글 보관함