반응형
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를 기준으로 떨어져서 위치한다.
반응형
'매일코딩 > HTML&CSS3' 카테고리의 다른 글
| 9.웹페이지제작 - 준비2 (0) | 2016.11.02 |
|---|---|
| 8.웹페이지제작 - 준비1 (0) | 2016.11.02 |
| 6.레이아웃 - 박스 정렬 순서 (0) | 2016.11.02 |
| 5.레이아웃 - 박스너비 고정하기 (0) | 2016.11.02 |
| 4.레이아웃 - 칼럼 탈락 현상 (0) | 2016.11.02 |
댓글