position 설정을 통한 박스 배치

10 months ago · 4a2277c6b2
parent 91c25a321f
commit 4a2277c6b2
1 changed files with 49 additions and 0 deletions
--- a/positioning/3-3/default.html
+++ b/positioning/3-3/default.html
@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <style>
        div {
            border: 3px solid #73ad21;
            max-width: 300px;
            margin: auto;
            height: 100px;
            background-color: white;
        }
        .box1 {
            position: static;
        }
        .box2 {
            position: relative;
            left: 30px;
            top: -30px;
        }
        .box3 {
            position: relative;
            left: 60px;
            top: -60px;
        }
        .box4 {
            position: absolute;
            left: 75px;
            top: 75px;
        }
        .box5 {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>
 </head>
 <body>
    <he>Box position</he>
    <hr>
    <div class="box1">Box-1: static</div>
    <div class="box2">Box-2: relative</div>
    <div class="box3">Box-3: relative</div>
    <hr>
    <div class="box4">Box-4: absolute</div>
    <div class="box5">Box-5: fixed</div>
 </body>
 </html>