(16.5.26) 박스겹치기-div활용

렉탱글 2016. 5. 26. 13:19

2016. 5. 26. 13:19

<!doctype html>

<html>

<head>

<title>logic</title>

<style>

div{width:100px; height:100px} // 만들 박스 크기 설정

.m1{background:red;} // 첫번째 박스를 'm1' 으로 정의, 전경색을 red로 설정

.m2{background:blue; position:relative; top:-50px; left:50px;}

// 두번째 박스를 'm2'로 정의, 전경색을 blue로 설정, 박스를 겹치기 위해 top, left 값 조정

// float는 개체를 겹칠 수 없지만 position은 개체 겹치기가 가능하다.

.m3{background:yellow;}

</style>

</script>

</head>

<body>

<div class="m1"></div> // 박스를 생성 후 'm1' (으)로 설정된 스타일을 불러온다.

<div class="m2"></div> // 박스를 생성 후 'm2' (으)로 설정된 스타일을 불러온다.

</body>

</html>

=== 결과창 ===

Rectangle's Daylife