lovecoding
/
VIP30


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!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: 200px;
            height: 200px;
            margin-top: 20px;
        }
        .main {
            width: 400px;
            height: auto;
            border: 1px solid #000;
            margin-top: 0;
            margin: 0 auto;
            position: relative;
        }
        .one {
            background: #00f;
        }
        .two {
            /* position: relative;
            top: 100px;
            left: 200px; */
            background: #f0f;
            /* position: sticky;
            top: 40px; */
        }
        .three {
            background: #0ff;
            /* position: fixed; */
            /* position: static; */
            /* top: 100px; */
            /* left: 100px; */
        }
        .four {
            background: #f00;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .five {
            background: #ff0;
        }
        .six {
            background: hotpink;
        }
        .seven {
            background: purple;
        }
    </style>
</head>
<body>
    <!-- 
        一个网页的组成：
            标准流（文档流）
            浮动
            定位
        定位
        position:
         1.sticky 粘性定位 常用于吸顶效果 配合top使用 脱离文档流不占位
         2.fixed 固定定位 脱离文档流不占位 相对于祖先元素定位
         3.relative 相对定位 不脱离文档流占位 相对于自己本身定位
         4.absolute 绝对定位
            a.父级盒子未定位 相对于祖先元素进行定位 脱离文档流 不占位
            b.父级盒子定位（相对定位） 脱离文档流 不占位 相对于父级盒子
         top bottom left right
         5.static 静态定位 不对页面产生影响
     -->
     <div class="main">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="seven"></div>
     </div>
</body>
</html>