|
|
@@ -0,0 +1,48 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <link rel="stylesheet" href="./定位.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 一个完整的网页：
|
|
|
+ 文档流（标准流）
|
|
|
+ 浮动
|
|
|
+ 定位
|
|
|
+
|
|
|
+
|
|
|
+ 定位：
|
|
|
+ position:
|
|
|
+ 1.fixed
|
|
|
+ 相对于浏览器的视口定位
|
|
|
+ 固定定位 脱离文档流 不占位
|
|
|
+ 2.sticky
|
|
|
+ 粘性定位 搭配top一起使用 一般用于吸顶效果
|
|
|
+ 3.static
|
|
|
+ 静态定位 页面存在即存在 不对页面造成影响
|
|
|
+ 4.relative
|
|
|
+ 相对定位 不脱离文档流占位 相对于自己本身
|
|
|
+ 5.absolute
|
|
|
+ 绝对定位:
|
|
|
+ a.父级元素没有任何定位的时候 相对于祖先元素定位 脱离文档流不占位
|
|
|
+ b.父级存在定位：相对定位；子绝父相 子级相对于父级定位 脱离文档流不占位
|
|
|
+ 控制层级：z-index
|
|
|
+ 搭配：top bottom right left
|
|
|
+ -->
|
|
|
+ <div id="box">
|
|
|
+ <div class="box1">1</div>
|
|
|
+ <div class="box2">2</div>
|
|
|
+ <div class="box3">3</div>
|
|
|
+ <div class="box4">4</div>
|
|
|
+ <div class="box5">5</div>
|
|
|
+ <div class="box6">6</div>
|
|
|
+ <div class="box7">7</div>
|
|
|
+ <div class="box8">8</div>
|
|
|
+ <div class="box9">9</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e