【CSS样式层叠表】：position属性|static|absolute|relative|fix|四种控制方式的使用方法

本文链接：https://blog.csdn.net/Diesel_Zsir/article/details/78135001

一、position的值为static

默认文档流。
position：static=不设置position的值；

二、position的值为absolute

元素相对【最近的】非static父级元素进行定位，如果所有的父级元素属性都为static，则相对body定位，且原位置不保留（原位置直接被其他元素顶替）。
定位条件：
①父级元素；
②父级元素不为static；
③如果①②都不满足，则相对body定位；
示例：
①令div2为子元素，div1为父元素，且div1的position值为非static

<body>
    <div1 style="position:relative">
        <div2 style="position:absolute；left:30px；">
        </div2>
    </div1>
</body>

效果：
子元素position值为absolute且父类元素position值非static时定位效果
①令div2为子元素，div1为父元素，但div1的position值为static（或不设值）

<body>
    <div1 style="position:static">
        <div2 style="position:absolute；left:30px;">
        </div2>
    </div1>
</body>

效果：
子元素position值为absolute但父类元素position值为static时定位效果

三、position的值为relative

元素相对自身原位置进行定位，且原位置一直保留（原位置无法被其他元素顶替）。

<body>
    <div1 style="position:relative;top:30px;left:30px">
    </div1>
</body>

效果：
这里写图片描述

四、position的值为fix

元素相对当前可见窗口进行定位——不管网页如何缩放，进度条如何滚动，元素始终在窗口可见范围的同一固定位置（常用于“牛皮癣广告”以及“返回顶部”）。