WEB：position定位

阳春三月天

已于 2023-07-04 11:24:15 修改

阅读量725

点赞数 2

文章标签： html5 css

于 2023-06-25 18:56:31 首次发布

本文链接：https://blog.csdn.net/weixin_50517811/article/details/131381575

版权

1. position

属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。——MDN

可以理解为设置了position（除static）的元素从原地飘起来了

2. position属性值

1. relative 相对定位

1.1 设置相对定位

(1) 给元素添加 position:relative

(2) 使用left 、 right 、top 、 bottom 属性进行位置调整

① top、bottom都设置时，top为准

② left、right都设置时，ltr left为准，rtl right为准

③ 一般选一对（左上、左下、右上、右下）

1.2 设置relative后特点

(1) 不会脱离文档流，元素位置起初在原位置（未添加定位），在不改变页面布局的情况下调整元素位置，会在原处留下空白

(2) 定位元素的层级比普通元素高

① 定位元素会在普通元素之上

② 两个定位元素，后写的在先写的之上

③ 相对定位的元素可以浮动

④ 相对定位的元素可以通过margin调整位置

1.3 示例

左侧为示例，右侧为DOM
为container容器设置了position:relative，可以通过top、left、right、bottom来调整位置
从dom可以看出container容器（position:relative）跟contain容器（普通）是同一层但是container容器会覆盖contain容器
另外通过margin调整位置，是在top、left、right、bottom的基础上进行调整，不建议使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .contain{
            width: 800px;
            height: 400px;
            margin: 50px auto 0;
            background-color: #bfa;
            border: 1px solid black;
        }
        .container{
            width: 800px;
            height: 400px;
            margin: 0 auto;
            background-color: palevioletred;
            border: 1px solid black;
            position: relative;
            top: -30px;
            left: 60px;
            /* margin: 50px; */
        }

        .item{
            width: 200px;
            height: 120px;
            background-color: darkcyan;
            border: 1px solid red;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 120px;
        }


    </style>
</head>
<body>
    <div class="contain"></div>
       <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
       </div> 
</body>
</html>

2. absolute 绝对定位

2.1 设置绝对定位

(1) 给元素添加 position:absolute，给其父元素或祖先元素添加position相当于围栏，如果祖先元素都未设置position，其包含块是html，包含块作为定位系统。

(2) 一般祖先元素的position:relative，其他属性值设置了也可以用

(3) 使用left 、 right 、top 、 bottom 属性进行位置调整（同relative不赘述）

2.2 设置absolute后的特点

(1) 脱离文档流，元素位置起初在原位置（未添加定位）上方，在不改变页面布局的情况下调整元素位置，会影响兄弟元素的位置

(2) absolute与float同时设置时，float失效，以absolute为准

(3) 可以通过margin调整位置

(4) 元素设置absolute之后会变成行内块

2.3 示例

图1，给盒子1设置了position:absolute;top:0;right:0
盒子1宽高默认被内容撑开，可以设置宽高
盒子1的下一个兄弟元素占据了其原来的位置
设置了position:absolute之后相当于飘起来，跟其他兄弟元素不在同一层级了。原位置没东西了。
图2，在图1的基础上给盒子3添加了position:absolute
不调整位置，前一个兄弟元素为标准流盒子，默认从原地飘起来，盒子4占据了原来盒子3的位置
图3，全部小盒子设置了position:absolute
都从原地飘起来后，前面的兄弟元素没有标准流盒子，默认top:0,left:0
后面的兄弟元素会罩在前面的盒子上

3. fixed 固定定位

3.1 设置固定定位

(1) 给元素添加position:fixed

(2) 使用left 、 right 、top 、 bottom 属性进行位置调整（同relative不赘述）对于视窗进行调整

3.2 设置fixed后的特点

(1) 脱离文档流，会对后面的兄弟元素、父元素由影响

(2) fixed与float同时设置时，float失效，以fixed为准

(3) 可以通过margin调整位置

(4) 元素设置absolute之后会变成行内块

3.3 示例

一般用来做一些“回到顶部”的样式

3. 定位层级

(1) 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

(2) 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。

(3) z-index 的属性值是数字，没有单位，值越大显示层级越高。

(4) 只有定位的元素设置 z-index 才有效。

(5) 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级

4. 总结

属性\定位类别	relative	absolute
是否脱离文档流	否	是
是否可以与浮动同时生效	是	是
是否变为行内块	是	是
定位参考点	原来的位置	包含块