lovecoding
/
web0331


			
				
					
						
						
							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: 200px;
            padding: 10px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #f00;
        }
        #box div {
            width: 200px;
            height: 200px;
            margin-top: 10px;
        }
        #part1 {
            background: #00f;
        }
        #part2 {
            background: #f0f;
            position: absolute;
            top: 100px;
            left: 300px;
        }
        #part3 {
            background: #0ff;
        }
        #part4 {
            background: #f00;
        }
        #part5 {
            background: rgb(140, 255, 0);
        }
        #part6 {
            background: rgb(255, 0, 21);
        }
        #part7 {
            background: rgb(255, 179, 0);
        }
        #part8 {
            background: rgb(212, 155, 208);
        }
    </style>
</head>
<body>
    <!-- 
        一个网页：
            文档流
            浮动
            定位

        position:top left right bottom
            1.sticky 粘性定位 吸顶效果 常搭配top属性进行使用
            2.static 静态定位
            3.fixed 固定定位  脱离文档流 不占位 相对于祖先元素进行定位
            4.relative 相对定位 脱离文档流  占位 相对于自己本身进行定位
            5.absolute 绝对定位
                a.父级无定位时  相对于祖先元素进行定位 脱离文档流 不占位
                b.父级有定位时  相对于父元素进行定位 脱离文档流 不占位  (子绝父相)
    -->
        <div id="box">
            <div id="part1"></div>
            <div id="part2"></div>
            <div id="part3"></div>
            <div id="part4"></div>
            <div id="part5"></div>
            <div id="part6"></div>
            <div id="part7"></div>
            <div id="part8"></div>
        </div>
</body>
</html>