常用的position属性:static,absolute,fixed,relative

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值