lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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: 400px;
            height: auto;
            border: 4px solid #f00;
            margin-left: 300px;
            /* position: relative; */
        }
        .box div {
            width: 200px;
            height: 200px;
            margin-top:15px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            border:1px solid #000;
        }
        .three {
            /* position: sticky; */
            /* position: static;
            top: 40px; */
            background-color: #f00;
        }
        .four {
            position: fixed;
            bottom: 100px;
            left:100px;
            background: orange;
            /* position: relative;
            top: 100px;
            left: 300px; */
            /* position: absolute;
            top: 300px;
            left: 20px; */
        }
    </style>
</head>
<body>
    <!-- 
        为什么会引出定位
        一个网页：
            文档流
            浮动
            定位

        position:定位 top left right bottom
            1.sticky 粘性定位 吸顶效果 top 一起使用 不脱离文档流 占位
            2.static 静态定位 不对页面产生影响
            3.fixed  固定定位 脱离文档流 不占位 相对于祖先元素定位
            4.relative 相对定位 不脱离文档流 占位 相对于自己本身去定位 
            5.absolute 绝对定位 脱离文档流 不占位
                a.相对于祖先元素进行定位  当父级没有定位时
                b.父级存在定位 (相对定位) absolute就是相对于父级进行定位
     -->
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="ejght">8</div>
    </div>
</body>
</html>