demo

2021-01-18 18:34:44 +08:00
parent 1c003714c3
commit 9853dbdd91
6 changed files with 144 additions and 1 deletions
--- a/csspress/demo2/absolute.html
+++ b/csspress/demo2/absolute.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        div {
+            width: 60px;
+            height: 60px;
+        }
+
+        .box1 {
+            width: 200px;
+            height: 200px;
+            background: yellow;
+            margin: 20px;
+            /* position:static */
+            position: absolute;
+        }
+
+        .box2 {
+            background: red;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box1">
+        <div class="box2"></div>
+    </div>
+    <p>
+        <p> 注：这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
+        <p> 加上position static 后也是根据body 定位，</p>
+        <p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
+       
+       
+        
+
+    </p>
+</body>
+
+</html>