lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!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 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;
        }
    </style>
</head>
<body>
    <!-- 
        为什么会引出定位
        一个网页：
            文档流
            浮动
            定位

        position:定位 top left right bottom
            1.sticky 粘性定位 吸顶效果 top 一起使用 不脱离文档流 占位
            2.static 静态定位 不对页面产生影响
            3.fixed  固定定位 脱离文档流 不占位 相对于祖先元素定位
     -->
    <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>