练习

2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
--- a/teaching/lhj/kejian/position.html
+++ b/teaching/lhj/kejian/position.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=], initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 
+            position  
+             绝对定位  他的参照物不是他自己 如果父盒子不被relative修饰，他的参照物就是最外层盒子（body）  如果父盒子被relative修饰  他的参照物就是父盒子
+             相对定位  以他自己为参照物
+             子绝父相  
+
+             固定定位   fixed
+             粘性      sticky  滚动条不动的时候 他相当于相对定位   滚动条滚动的时候  他相当于fixed 固定定位
+         */
+         *{
+             margin: 0;
+             padding: 0;
+         }
+         .box{
+             width:400px;
+             height: 400px;
+             background: green;
+             margin: auto;
+             margin-top: 50px;
+             position: relative;
+         }
+         .item{
+             width: 200px;
+             height: 200px;
+             background: blue;
+             position: absolute;
+             top: 0;
+             left:0
+         }
+         .shu{
+             width: 10px;
+             height: 500px;
+             background-color: aliceblue;
+         }
+    </style>
+</head>
+<body>
+    <div style="position: sticky; top: 0; ">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
+    <div class="box">
+        <div class="item"></div>
+    </div>
+    <div class="shu"></div>
+    
+</body>
+</html>