美文网首页让前端飞
CSS定位(相对定位,固定定位,绝对定位)

CSS定位(相对定位,固定定位,绝对定位)

作者: 前端萧萧 | 来源:发表于2021-01-26 17:32 被阅读0次

    在CSS中,可以使用position属性来定位元素。position 属性规定元素的定位类型。

    属性值:

    • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    • fixed:生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    • relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    • static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    相对定位:

    相对于其正常位置进行定位。(可以用来对标签的位置进行微调)

     <html>
    <head>
    <title>相对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
    height: 2000px;
    }
    #span2{
    position: relative;/*设置定位方式为相对定位*/
    top: 20px;
    left: 14px;
    }
    </style>
    </head>
    <body>
    <span id="span1">这是一</span>
    <span id="span2">这是二</span>
    <span id="span3">这是三</span>
    </body>
    </html>
    

    固定定位

    始终相对于浏览器窗口进行定位。

    <html>
    <head>
    <title>固定定位</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
    height: 2000px;
    }
    div{
    width: 500px;
    height: 300px;
    border:solid 2px red;
    position: fixed;/*设置定位方式为固定定位*/
    bottom:500px 1px ;
    }
    p{
    float: right;
    }
    </style>
    </head>
    <body>
    <div>这是一个div盒子</div><br>
    <p>这个不会动</p>
    </body>
    </html>
    

    绝对定位

    相对于 static 定位以外的第一个父元素进行定位。

    <head>
    <title>绝对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
    div{
    width: 500px;
    height: 400px;
    border: solid 2px red;
    /*给div设置相对定位,使得div作为section的参照物进行绝对定位*/
    position: relative;
    }
    section{
    width: 50px;
    height: 40px;
    background-color: yellow;
    position: absolute;/*设置定位方式为绝对定位*/
    /*让section始终在div右下角*/
    /*让section相对在div右侧距离为0*/
    /*让section相对在div低侧距离为0*/
    /*绝对定位必须设置参照物,若未设置参照物,则相对于body进行定位*/
    right: 0px;
    bottom: 0px;
    }
    
    </style>
    </head>
    <body>
    <div>
    <section></section>
    </div>
    </body>
    

    相关文章

      网友评论

        本文标题:CSS定位(相对定位,固定定位,绝对定位)

        本文链接:https://www.haomeiwen.com/subject/xpogzktx.html