lovecoding
/
vipAllDay


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!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>