CSS定位属性position详解、定位分类、定位层级

html零基础必看——html入门，编程就是如此简单

第十一章：position定位属性

总结

1.认识定位position属性

1.1什么是定位

定位postion属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。不同的定位属性值可以使元素拥有不同的表现形式。

1.2 position 属性的五个值

position属性的五个值指定了元素的定位类型：

static 静态定位（默认值，没有定位）
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

2. 定位分类

2.1 静态定位 position: static ；

静态定位：没有定位意思，定位的默认属性。忽略方位值（ top left right bottom）和层级也不能使用

2.2 相对定位 position: relative;

不会脱离文档流，原本位置会得到保留；
相对于自身原本的位置进行移动。以自身左上角为基点来移动；
通过方位属性： top left right bottom 调整位置，方位值：px百分比等，默认值是auto，而不是0；
移动后的位置和其他盒子有重叠的话，会覆盖其他盒子

<style>
        .div1 {
      
      
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .div2 {
      
      
            /* 相对定位：参照的是自己本身原本的位置 */
            position: relative;
            /* 相对自己原本位置，距离左边空出50px，所以可以理解为是向右移动50px
            left:50px等价于right:50px */
            left: 50px;
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .div3 {
      
      
            /* 相对定位 */
            position: relative;
            /* 相对自己原本位置，距离右边边空出50px，所以可以理解为是向左移动50px
            right:50px等价于lfet:-50px */
            right: 50px;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .div4 {
      
      
            /* 相对定位 */
            position: relative;
            top: 100px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        /* 相对定位：不会脱离文档流，自身位置偏移后，原本位置会保留，后面其他元素不会占据它原本的位置 */
        .div5 {
      
      
            /* 没写 position属性，默认就是static。static默认值，没有定位*/
            width: 400px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">我是正常位置的盒子div1</div>
    <div class="div2">相对我自己div2正常位置距离左边空出的距离，可以理解为向右移动</div>
    <div class="div3">相对我自己div3正常位置距离右边空出的距离，可以理解为向左移动</div>
    <div class="div4">我是盒子4，我移动后的位置和其他盒子有重叠的话，我会覆盖其他盒子，但是我的原本位置会得到保留，没有人敢占据</div>
    <div class="div5">我是盒子5，我没写 position属性，默认就是static。static默认值，没有定位</div>
</body>

效果图：
在这里插入图片描述

2.3 绝对定位 position: absolute;

脱离文档流，原地起飞，原本位置不再保留，后面其他元素会占据它原本的位置，搭配方位值来移动。
参考最近一个父级，相对父级定位来进行移动。前提是它的父级元素设置了定位。如果父级页面中没写定位的话，默认参考浏览器，也就是它的祖先的左上角，以浏览器左上角来进行移动。

也就是说，如果它的父元素设置了定位，那么它就会相对于它的父元素来定位，如果它的父元素没有设置定位，那么就得看它祖父元素是否有设置定位，如果都没有就是参照浏览器进行定位移动。

通过方位属性: top left right bottom 调整位置
方位值: px/百分比等默认值是auto 而不是0

<style>
        .father1{
      
      
            /* 父级有设置相对定位属性 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: red;
            margin: auto;
        }
        .son1{
      
      
            /* 绝对定位：参照物是设置有定位属性的最近的父级元素
            子级使用绝对定位属性的前提是：父级有设置定位属性，子级设置的绝对定位属性才能参照父元素生效 */
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box1{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
        .father2{
      
      
            /* 父级没有设置定位属性 */
            width: 300px;
            height: 300px;
            background-color: green;
            margin: auto;
        }
        .son2{
      
      
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box2{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
        .father3{
      
      
            /* 父级有设置定位属性 */
            position: absolute;
            top: 600px;
            left: 400px;
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: auto;
        }
        .son3{
      
      
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }
        .box3{
      
      
            width: 250px;
            height: 250px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father1">
        <div class="son1">
            我是儿子1，我设置了绝对定位，我的父级元素红色盒子，设置了相对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box1">
        </div>
    </div>

    <div class="father2">
        <div class="son3">
            我是儿子2，我设置了绝对定位，我的父级元素绿色盒子，没有设置定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box3">
        </div>
    </div>

    <div class="father3">
        <div class="son3">
            我是儿子3，我设置了绝对定位，我的父级元素蓝色盒子，设置了绝对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
        </div>
        <div class="box3">
        </div>
    </div>
</body>

效果图：
在这里插入图片描述
绝对定位的特点：
1. margin: auto 单独会失效 -->见本章4.方法一有讲解。
2. 找不到最近的一个父级相对定位就会找浏览器
3. 配合我们的相对定位来使用子绝父相 (父相子绝)
4. 改变元素标签的原本特性元素宽高默认0
5. 宽度百分比继承上一个父级的相对定位的宽度而不是继承它结构上的父级宽度
6. 注意点: 方位属性 left和top 优先级比 right和bottom 高

改变元素标签的原本特性元素宽高默认0：

<style>
        span{
      
      
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        p{
      
      
            position: absolute;
            height: 100px;
            background-color: red;
        }
</style>
<span>我是行内span元素 ，我设置了绝对定位属性后，改变了我原本的特性，我就可以支持宽高设置了</span>
 <!-- <p>我是块级元素p，我设置了绝对定位属性后，改变了我原本的特性，我的宽度变成了由我的内容撑开了</p> -->

效果图：
在这里插入图片描述

宽度百分比继承上一个父级的相对定位的宽度而不是继承它结构上的父级宽度；
方位属性 left和top 优先级比 right和bottom 高

<style>
    .box {
      
      
            /* position: relative; */
            width: 500px;
            height: 400px;
            background-color: red;
        }

        .son {
      
      
            /*宽度百分比   继承上一个父级的相对定位的宽度  而不是继承它结构上的父级宽度
          子元素son设置宽度设置100%，son的父级是box，如果父级没有设置定位属性的话，所以它就再往上找，找到浏览器做参照，所以此时就继承浏览器的宽度 ，而不是继承它结构上的父级box宽度。如果它的父级box设置了定位属性，它就会继承父级的宽度*/
            position: absolute;
            /* 方位属性 left和top 优先级比  right和bottom 高  */
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            width: 100%;
            height: 200px;
            background-color: green;
        }    
</style>
<div class="box">
        <div class="son">111</div>
</div>

在这里插入图片描述

2.4 固定定位 position: fixed;

不会随着你的滚动条而滚动；
脱离文档流，不占位置。后面的元素会占据它的位置，被它遮挡了；
参考物=浏览器的窗口来进行位置的移动（和父级没有关系，只让浏览器窗口 (window view)来进行移动）
固定定位
元素宽高默认为0
margin:auto 失效

2.5 粘性定位 position: sticky;

不脱离文档流，后面的元素不会被它遮挡。
在日后js一起完成吸顶效果

<style>
        .header{
      
      
            /* 固定定位 */
            /* position: fixed; */

            /* 粘性定位 */
            position: sticky;
            top: 0px;
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
        }
        .wrap{
      
      
            width: 1000px;
            height: 500px;
            border: 2px solid  red;
            margin: 20px auto;
        }

        .nav-right{
      
      
            position: fixed;
            top: 200px;
            right: 0px;
            width: 100px;
            height: 500px;
            background-color: #096;
        }
    </style>
</head>
<body>
     <div class="header">头部</div>
     <div class="wrap">
         我是内容盒子 容器
     </div>
     <div class="wrap">
        我是内容盒子 容器
    </div>
    <div class="wrap">
        我是内容盒子 容器
    </div>
    <div class="wrap">
        我是内容盒子 容器   
    </div>

    <div class="nav-right">
        右侧导航
    </div>
</body>

固定定位效果图：头部和右侧导航被固定住了，不会随着滚动条的滚动而滚动。
由于脱离了文档流，内容区域最上面一行字会占据头部的位置，从而被头部遮住了。
在这里插入图片描述
粘性定位效果图：头部和右侧导航被固定住了，不会随着滚动条的滚动而滚动。
内有脱离文档流，所以内容区域最上面一行字没有占据头部的位置，可以看见。

在这里插入图片描述

3.定位层级z-index

当有多个盒子发生重叠的时候，默认是后来者居上，往往是最后一个重叠的元素会显示出来，这时候我们可以通过z-index属性指定他们叠放的次序。

z-index: 层级，默认层级是0
取值: 值越大，层级的优先级也就越高
一般通过正数给指定的元素提高层级，当然也可以通过负数降低层级。无论是正数还是负数，都是值越大，层级越高。
注意： z-index层级，这个属性只针对与有定位属性的元素使用才会生效，其它盒子没有设置定位属性，不会生效的，默认定位也不能用

这原本是普通的4个盒子：
在这里插入图片描述

现在给这四个盒子都加上一个绝对定位，同时给他们的父级盒子加上一个相对定位。我们发现这四个盒子都脱离了文档流，重叠在一起了。由于是后来者居上，所以我们只看到了盒子4：
在这里插入图片描述

这时候可以通过z-index属性指定他们叠放的次序。比如说，我想让第二个盒子叠放次序出现在第一位：.list>.son1{z-index: 1;，

在这里插入图片描述

4.使用定位让元素在父级中居中

方法一:

/*关键属性
绝对定位加上四个方位属性一个都不能少
*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方法二：

/*关键属性*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;

这也就是上面2.3绝对定位的特点中提到的margin：auto不能单独用，单独用会失效的原因。

<style>
        .wrap{
      
      
            /* position: relative; */
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            width:500px;
            height: 500px;
            background-color: red;
        }
        .box{
      
      
            /* 第一种 */
            /* position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto; */

            /* 第二种 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 负自身宽度的一半 */
            margin-left: -150px;
            /* 负自身高度的一半 */
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: springgreen;
        }
    </style>
</head>
<body>
      <div class="wrap">
          <div class="box"></div>
      </div>
</body>

效果图：
在这里插入图片描述

总结

上述是小编为大家整理的定位属性，分别对五个种类的定位进行了比较详细的讲解，还补充了定位层级和定位元素在父级中居中的方法等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。