position 설정을 통한 박스 배치

2024-06-21 15:32:54 +09:00
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>