본문 바로가기
매일코딩/HTML&CSS3

7.레이아웃 - 박스 겹치기

by 인생여희 2016. 11. 2.
반응형






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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>샘플</title>
<style>
.boxA{boder:solid 8px green; background-color:gold; color:pink}
.box1{ 
        height: 200px;
        border:4px solid green;
        text-align: center;
        position:relative
}
.box2{
            height: 100px;
        border:4px solid blue;
    
        position:absolute;
        top:150px;left:60px
        
}
 
 
</style>
</head>
<body>
 
<div class="boxA">
 
<div class="box1">
BOX1
</div>
 
 
<div class="box2">
BOX2
</div>
 
</div>
 
 
 
</body>
</html>
 
cs




- 박스 1과 2를 div태그로 감싸 그룹화 한다.


박스 A의 position 속성을 reletive , box2의 속성을 absolute 로 지정 그럼 박스 2가 boxA 기준으로 위치를 정한다.


그리고 박스 2의 TOP LEFT를 지정하면 박스A를 기준으로 떨어져서 위치한다. 



반응형

댓글