CSS定位-6.1定位属性-使用position属性来表示定位-static、relative、absolute、fixed---z-index该属性只有在position值为absolute时才有效_position定位属性设置哪些属性值,添加z-index属性会有效-CSDN博客

本文链接：https://blog.csdn.net/qq_44280574/article/details/108336422

1.定位属性
定位属性用于设置元素在页面中的位置
使用position属性来表示定位
它的值可以设置为 static（标准流布局）、relative（相对布局）、absolute（绝对布局）、fixed（固定布局）
默认值为static，表示标准流布局

2.定位位置
在使用 1.定位属性定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置
top用于设置元素定位时距离上部的偏移距离
bottom用于设置元素定位时距离下部的偏移距离
left用于设置元素定位时距离左侧的偏移距离
right用于设置元素定位时距离右侧的偏移距离
需要注意的是，偏移量可以为负值（即往相反方向走）

3.层级
可以使用z-index设置定位元素的层级，值越大，显示时越是覆盖在其他元素的上边
z-index属性默认值为auto，代表层级与父元素相同
z-index该属性只有在position值为absolute时才有效

例如：
.pos1 { position:fixed; }

我是一个固定定位的元素

.pos2 { position:relative; }

我是一个相对定位的元素

.pos3 { position:absolute; top:50px; }

我是一个绝对定位的元素

本节先讲解static和fixed

fixed 当设置为fixed的时候，发现，
1.宽度不再是整个页面（也就是父容器）的宽度，而是变成内容的宽度。不过，我们可以通过width: 500px; height: 100px; 去设置改变它。
2.该设置成 position: fixed; 的这个div 不随着页面滚动而滚动，维持他原先的位置，相对于整个页面的这个位置，不会动。

小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>position</title>
    <style>
        .pos1 {
            background: yellow;
            height: 100px;
            position: fixed;
            width: 500px;
            top: 100px;
            /* bottom: 100px; */
            left: 100px;
            /* right: 100px; */
        }
    </style>
</head>
<body>
    <div>华为云</div>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <div class="pos1">我是一个定位元素</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
    <div>华为云</div>
</body>
</html>