|
|
@@ -0,0 +1,76 @@
|
|
|
+<!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>
|
|
|
+ #box {
|
|
|
+ width: 500px;
|
|
|
+ height: 1600px;
|
|
|
+ border: 1px solid #000;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* position: relative; */
|
|
|
+ }
|
|
|
+ #box div {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .box1 {
|
|
|
+ background: firebrick;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ background: blue;
|
|
|
+ /* position: sticky;
|
|
|
+ top: 20px; */
|
|
|
+ /* position: static; */
|
|
|
+ position: fixed;
|
|
|
+ /* position: relative; */
|
|
|
+ /* position: absolute; */
|
|
|
+ top: 100px;
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
+ .box3 {
|
|
|
+ background: plum;
|
|
|
+ }
|
|
|
+ .box4 {
|
|
|
+ background: yellow;
|
|
|
+ }
|
|
|
+ .box5 {
|
|
|
+ background: aqua;
|
|
|
+ }
|
|
|
+ .box6 {
|
|
|
+ background: pink;
|
|
|
+ }
|
|
|
+ .box7 {
|
|
|
+ background: purple;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 一个网页构成：
|
|
|
+ 文档流 浮动 定位
|
|
|
+ position:
|
|
|
+ 方向：top bottom right left
|
|
|
+ 1.sticky 粘性定位 常用于吸顶效果 搭配top使用
|
|
|
+ 2.static 静态定位 对页面不产生任何效果
|
|
|
+ 3.fixed 固定定位 相对于可视窗口定位 脱离文档流 不占位
|
|
|
+ 子绝父相
|
|
|
+ 4.relative 相对定位 相对于自身定于 不脱离文档流 占位
|
|
|
+ 5.absolute
|
|
|
+ a.父级未开启定位 自己本身定位 相对于可视窗口定位 脱离文档流 不占位
|
|
|
+ b.父级开启定位 relative 子集相对于父级进行定位 脱离文档流 不占位
|
|
|
+ -->
|
|
|
+ <div id="box">
|
|
|
+ <div class="box1"></div>
|
|
|
+ <div class="box2"></div>
|
|
|
+ <div class="box3"></div>
|
|
|
+ <div class="box4"></div>
|
|
|
+ <div class="box5"></div>
|
|
|
+ <div class="box6"></div>
|
|
|
+ <div class="box7"></div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e