HiDocs

###position定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

![image-20220405185620324](D:\downloads\typora picture\image-20220405185620324.png)

给元素加定位：相当于搬家，相对定位搬家了也会占着原来的，绝对定位搬家了就不会占用原来的位置了

默认定位

static

当元素的position属性值为static时，元素的top、right、bottom、left、z-index属性都不会生效

如果不设置，那就会顶着上一个元素的后面，紧跟着它

设置的长宽如果为百分比，那么它不会随页面的放大缩小来变动，如果设置的是px，那么就会变动

相对定位

relative

css

#box2{
    background:green;
    /*相对定位
        以当前为参照物移动指定的距离
        需要设置top，left，bottom，right属性
        注意：相对定位，相对于自己原来的位置，被定位的元素仍然会占据原有的物理位置
    */
    position:relative;
    /*移动定位元素*/
    top:200px;/*还有bottom*/
    left:200px;/*right*/
}

html

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

注：给div设置position为relative，如果不设置top,left等属性，那就相当于加了一个标记，但是位置不改变，是让父类做参照物的一个策略

####绝对定位

absolute

定位参照物的确定较为麻烦

css

div{ /*设置一个默认值，为200，200*/
    width:200px;
    height:200px;
}
#box1{
    background: red;
}
#box2{
    width:500px;
    height:500px;
    background:green;
    border:1px solid green;
    /*绝对定位：
        绝对定位的元素不会占据原有的物理位置，那么下面的元素就会来占用这个原来的位置
        以其他元素作为参考物移动指定距离的定位方式
        关于绝对定位的参考点：
        1.如果元素的外层元素是非static（即有了除默认值之外的定位position设置（相对绝对定位的都可以））那么这个外层元素就成为该元素的定位参考点
        2.如果元素的紧挨着的外层元素没有设置任何position的值，那么该元素将再向外层寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层的形式)
        3.如果该元素的外层元素没有任何一个元素采用position定位，或者没有外层元素，那么此时定位参考元素变为body或者说页面的左上角（0，0）原点
    */
    /*position: absolute;*/
    /*top:200px;*/
    /*left:200px;*/
    position: relative;
}
#father{
    width:200px;
    height:200px;
    background: aquamarine;
    /*父类做一个定位*/
    /*position:relative; 会把son的定位参照物变成father*/
    margin:20px; /*距离外层的距离为20px*/

}
#son{
    width:100px;
    height:100px;
    background:fuchsia;
    position:absolute; /*此时参考点是外层的box2那个div，因为father里面没有定位*/
    top:100px;
    left:100px;
}
#box3{
    background: blue;
}

html

<body>
    <div id="box1"></div>
    <div id="box2">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
    <div id="box3"></div>
</body>

绝对定位的div会去覆盖原有的div

注：==absolute的auto机制：==absulute并非一定会到（0,0）点

由上述实验可证得，当absolute元素的父元素等以上的元素都没有设置position属性时，absolute定位元素的默认位置就是该元素假定在标准文档流中的位置。具体地，浏览器先预估该元素在标准文档流中的位置，然后再进行绝对定位，将它移出标准文档流，它并不会自动移到"left 0 top 0"的位置，因为此时的left和top等属性默认是auto的，并不是0。假如有兄弟元素占位，它的原点也不会出现在父元素内容块的左上角。

所以在元素设置为absolute时，它的父元素不一定需要设置为relative，要看具体情况

子绝父相！

实际应用：

absolute的div如果放在relative的div里面，并且外层的div定义了margin等于0px auto，就可以实现位置优良，不会随浏览器页面大小错乱位置，但是如果直接用absolute就会错乱

如果该div直接定义了relative并且margin等于0px auto，也是可以不错乱位置的

css

#top_nav{ /*其实就是.header_left>div:last-child>div*/
    /*border:3px solid #000;*/
    position: absolute; /*让它不对父类产生影响,也不会对其他元素产生影响，脱离文档流，不占用原来的位置*/
    top:42px; /*只需要设置一个top即可，因为有left有auto机制*/
    background: #fff;
    border:1px solid #ccc;
    margin-left:-15px; /*利用margin来控制位置*/
    z-index: 10; /*显示层级，很高*/
    display: none; /*先隐藏起来*/
}

固定定位

fixed

一定是相当于整个页面的，也就是外面的大body，以（0，0）点为参考点

利用left，right，bottom，top的值

css

div{
    height:2000px;
    background:palevioletred;
}
#box{
    width:80px;
    height:400px;
    background: green;
    position: fixed;
    right:0px; /*距离右侧0*/
    top:300px; /*距离顶部300*/
}

html

1
    <div>
        <div id="box"></div>
    </div>
2

####z-index堆叠顺序：

一旦修改了元素的定位方式，则元素可能会发生堆叠可以使用z-index属性来控制元素框出现的重叠顺序，即==设置显示优先级==
z-index==仅能在定位的元素上生效==
z-index属性：
- 值为数值，==数值越大表示堆叠顺序、优先级越高==，即离用户越近
- 可以设置为负值，表示离用户更远，一般不要设置为负值
- Z-index 仅能在定位元素上奏效
- 当两者的z-index数值相同时，代码出现较晚的覆盖在上面

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index设置定位元素z轴的距离(定位元素的显示顺序)</title>
    <style>
        #one{
            width:200px;
            height:200px;
            background: red;
            position: absolute;
            top:100px;
            left:100px;
            z-index:1;
        }
        #two{
            width:200px;
            height:200px;
            background: yellow;
            position:absolute;
            top:150px;
            left:150px;
            z-index:999;
        }
    </style>
</head>
<body>
    <!--注意：z-index属性只支持定位元素-->
    <div id="one"></div>
    <div id="two"></div>
</body>
</html>

默认定位 ​

相对定位 ​

固定定位 ​

默认定位

相对定位

固定定位