常用的position属性：static，absolute，fixed，relative

最新推荐文章于 2024-07-07 17:22:42 发布

少年是只猫

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量623

点赞数

分类专栏： css position 文章标签： css position

本文链接：https://blog.csdn.net/qq_41128253/article/details/97759987

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

position

1 篇文章 0 订阅

订阅专栏

position

在写样式时经常要用到position属性，我在刚开始接触这个时遇到很多的问题，下面我来分享一下我对它的一些理解，如有错误，望指正。

position:static

static是默认的值，正常流。

position:relative与position:absolute

relative是相对定位，使用这个属性，top,left…及z-index可以起作用，如果后代元素中有设置position:absolute，那这个元素就以设置position:relative来定位。
absolute是绝对定位，使用这个属性后，元素在页面中不再占有位置，脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background: #00aeef;
            margin: 200px auto;
            position: relative;
        }
        .box2{
            background: #f0ad4e;
            margin-left: 100px;
        }
        .box3{
             background: #00ff00;
            margin-left: 50px;
             /*position: absolute;*//*使用后以box1为定位*/
             /*left: 0;
             top: 0;*/
         }
        div{
            width: 50%;
            height: 50%;
            opacity: .8;/*透明度，观察效果用的*/
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>
</body>
</html>

box3未使用position:absolute时效果图
box2宽度为box1的50%，box3的宽度为box2的50%。
在这里插入图片描述
box3使用position:absolute时效果图

        .box3{
             background: #00ff00;
             margin-left: 50px;
             position: absolute;/*使用后以box1为定位*/
             /*left: 0;
             top: 0;*/
         }

在这可以看到，box1和box2没有变化，box3使用position:absolute后以box1为定位，宽度50%不再是box2的50%，而是box1的50%。box3没有设置left，top等值，所以位置还在原处（父元素右上角），因为设置margin-left: 50px;，所以往右偏移50px。
在这里插入图片描述
开启left和top后效果图

        .box3{
             background: #00ff00;
             margin-left: 50px;
             position: absolute;/*使用后以box1为定位*/
             left: 0;
             top: 0;
         }

现在box3的位置以box1的右上角(left:0;top:0;)为基准点，受margin-left: 50px;影响像右偏移50px。
在这里插入图片描述
position:absolute根据它最近的父级节点设置的position:absolute，position:relative和position:fixed以及transform属性来定位。如果父级元素中都没有设置这些属性，则以html节点来定位。

position:fixed

position:fixed固定定位，在父级节点中都没有设置transform属性下，根据html节点来定位，如果父级节点中有设置transform属性，则以最近设置transform属性的节点来定位。

        .box3{
             background: #00ff00;
             position: fixed;
             left: 0;
             top: 0;
         }

关于z-index

在设置position属性的值非static情况下有效。没有设置z-index时，默认同级元素，后面的元素比前面的高，即后面的元素可以覆盖在前面元素上。设置z-index后，值大的可以覆盖在值小的上面。（同级元素使用）

少年是只猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录