WithCoderWithCoderWithCoder

CSS定位属性position简介

    在CSS中,position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。其中,position的值主要有以下几种:

    1. static:默认值,使用常规的布局方式

    2. relative:相对定位,元素相对于其原本的位置进行定位

    3. absolute:绝对定位,元素相对于最近的且不是static定位的父元素进行定位

    4. fixed:固定定位,元素相对于浏览器窗口进行定位,当有滚动条时,元素不会跟屏幕一起滚动     

    5. sticky:粘滞定位,类似relative和fixed的合体

    下面就position的几种定位简单介绍。

    1. position: static

    在不指定position属性的值时,默认值为static,此时元素排放遵循常规流。该关键字指定元素使用正常的布局行为,窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素。其中:

    1.1 每个非浮动块级元素都独占一行

    1.2 内联元素不会独占一行,多个内联元素默认从左到右排放,若当前行容不下,则另起新行再排放

    1.3 浮动元素按规定浮在行的一端,排放行为和内联元素类似

    1.4 几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素

    默认static定位时,top、right、bottom、left 属性无效。

    举例:   

    <style>
        .container {
            background-colorgrey;
            height200px;
        }

        .content {
            background-colortomato;
            width100px;
            height100px;
            positionstatic;
            /* top,right,bottom,left没有起作用 */
            left10px;
        }
    </style>
    <div class="container">
        <div class="content">
        </div>
    </div>

    1-200416093624644.png

    在不设置content 元素的 position属性或对 position 设定 static 后,top、right、bottom、left 就失效了,而元素 content 以正常的“常规流”形式呈现。

    2. position: relative

    相对定位,元素相对于其原本的位置进行定位。元素遵循常规流,并且参照自身在常规流中的初始位置通过top,right,bottom,left这4个定位偏移属性进行偏移,偏移时不会改变页面布局(也就是说,相对定位不会影响常规流中的其他元素)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。   

    <style>
        .box {
            background-colorgrey;
            height300px;
        }

        .box1 {
            background-coloryellow;
            width100px;
            height100px;
        }

        .box2 {
            background-colortomato;
            width100px;
            height100px;
            /* 设置position为relative  */
            positionrelative;
            top10px;
            left10px;
        }

        .box3 {
            background-colorblack;
            width100px;
            height100px;
        }
    </style>
    <div class="box">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
        <div class="box3">
        </div>
    </div>

    当没有设置left、top等属性时,元素正常出现在常规流中的位置

    1-200416112F2E9.png

    当设置left、top等属性时,元素根据偏移值进行偏移,但不影响页面布局

    1-200416112HcH.png

    3. position: absolute

    绝对定位,对象脱离常规流,此时元素偏移属性参照的是离自身最近的定位祖先元素(position属性为非static的定位祖先元素);如果没有定位的祖先元素,则一直回溯到body元素。文档不为元素预留空间,元素的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

    举例:   

    <style>
        .container {
            background-colorgrey;
            height300px;
            margin50px;
            /* 如果container没有设置position或position:static,box2会以body为定位祖先 */
            /* position: relative; */
        }

        .box1 {
            background-coloryellowgreen;
            width150px;
            height150px;
        }

        .box2 {
            background-colortomato;
            width100px;
            height100px;
            positionabsolute;
            top10px;
        }
    </style>
    <div class="container">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
    </div>

    1-200416122HX45.png

    因为 box2 的父元素 container 没有设置 position,默认为 static,所以找到的第一个父元素是 body,因此box2相对于 body 向下移动10px。当container开启position且值不为static时(通常会将container的position设置为relative),box2会以container作为定位祖先。

    4. position: fixed

    固定定位,与absolute类似。但元素的偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 同样,文档不为元素预留空间,元素脱离常规流。   

    举例: 

    <style>
        .container {
            background-colorgrey;
            height1000px;
        }

        .box {
            background-colortomato;
            width100px;
            height100px;
            right20px;
            top100px;
            /* 开启固定定位 */
            positionfixed;
        }
    </style>
    <div class="container">
        <div class="box">
        </div>
    </div>

    1-200416123952446.png 

    box元素开启fixed定位,位置固定在距窗口顶部100px,距窗口右边20px,且不会随滚动条滚动。

    5. position: sticky

    粘滞定位,元素在常态时遵循常规流。它就像是相对定位relative和固定定位fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。这个用的不多,可根据自身情况进行选择。

欢迎分享交流,转载请注明出处:WithCoder » CSS定位属性position简介