5分钟了解 position 属性

最新推荐文章于 2022-06-25 11:12:49 发布

Dariuslwk

最新推荐文章于 2022-06-25 11:12:49 发布

阅读量861

点赞数 2

分类专栏： DAYNOTE 文章标签：定位 css html html5

本文链接：https://blog.csdn.net/qq_44158936/article/details/105476842

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

position 属性规定元素的定位类型

1、position属性说明

这个属性定义建立元素布局所用的定位机制。

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

相对定位元素会相对于它在正常流中的默认位置偏移。

2、position 属性值

值	描述
absolute	生成绝对定位的元素，相对于最近的非static属性进行定位；若无非static的父元素，则相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其默认文档流的位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	对于任意元素来说，其 position 默认的取值就是 static，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

3、案例分析

3.1、当 `position: static;` 时

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位: static</title>
    <style type="text/css">
        .wrapper {
            border: 1px solid blue ;
            width: 800px ;
            height: 200px ;
        }

        .first .title {
            width: 400px ; height: 200px ; background-color: #dedede ;
            position : static ; /* 对于任意元素来说，其 position 默认的取值就是 static  */
            left : 0 ; /* 当 position 属性取值为 static 时，那么 left 、right 取值无效 */
            top : 0 ; /* 当 position 属性取值为 static 时，那么 top 、bottom 取值无效 */
        }
        .first .link {
            width: 400px ; height: 200px ; background-color: #fffdab;
            position : static ;
            right : 0 ;
            top : 0 ;
        }

        .second .title {
            width: 400px ; height: 200px ; background-color: #dedede ;
            position : static ;
            left : 0 ;
            top : 0 ;
        }
        .second .link {
            width: 400px ; height: 200px ; background-color: #fffdab;
            position : static ;
            right : 0 ;
            top : 0 ;
        }
    </style>
</head>
<body>

    <h3>理解默认文档流: 从左到右、从上向下排列</h3>

    <div class="wrapper first">
        <div class="title">手机</div>
        <div class="link">查看全部</div>
    </div>

    <hr style="margin-top: 220px ; ">

    <div class="wrapper second">
        <span class="title">手机</span>
        <span class="link">查看全部</span>
    </div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GxWgqSXp-1586698448245)(D:\DAYNOTE\position1.PNG)]$

此时，设置了 static 的元素，按照默认文档流进行定位，不受 left、right、top、bottom的影响。

3.2、当 `position:relative;` 时

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : relative</title>
        <style type="text/css">
            .outer { border: 2px solid blue ; width: 400px ; height: 200px ; margin: 50px auto ; }
            /* 通过调整尺寸，使 inner 恰好位于 outer 内部 */
            .inner { border: 2px solid red ; width: 396px ; height: 196px ; }

            .first {
                /* 相对于元素本来的位置进行定位 */
                position: relative ; /* 相对定位 */
                /* 尽管采用了相对定位，但是没有修改 left /right 、top/bottom 的取值，元素仍然在原来位置 */
            }

            .second {
                position : relative ; /* 相对于元素本来的位置进行定位 */
                left : 20px ; /* 元素在其本来位置基础上向右移动 20 像素*/
                top : 20px ; /* 元素在其本来位置基础上向下移动 20 像素*/
            }

            .third {
                position : relative ; /* 相对于元素本来的位置进行定位 */
                right : 20px ; /* 元素在其本来位置基础上向左移动 20 像素*/
                bottom : 20px ; /* 元素在其本来位置基础上向上移动 20 像素*/
            }
        </style>
    </head>
    <body>

        <h3>相对定位(relative) 是相对于当前元素在默认文档流中的本来位置进行定位</h3>

        <div class="outer">
            <!-- inner 外部的 outer 主要是起参照作用，我们不准备参照 outer 进行定位 -->
            <!-- 当对  first 采用相对(relative)定位时，是相对于 first 元素本来的位置进行定位，不是相对于父元素 -->
            <div class="inner first"></div>
        </div>

        <div class="outer">
            <!-- inner 外部的 outer 主要是起参照作用，我们不准备参照 outer 进行定位 -->
            <!-- 当对  second 采用相对(relative)定位时，是相对于 second 元素本来的位置进行定位，不是相对于父元素 -->
            <div class="inner second"></div>
        </div>

        <div class="outer">
            <!-- inner 外部的 outer 主要是起参照作用，我们不准备参照 outer 进行定位 -->
            <!-- 当对  third 采用相对(relative)定位时，是相对于 third 元素本来的位置进行定位，不是相对于父元素 -->
            <div class="inner third"></div>
        </div>
    
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFwhrArH-1586698448246)(D:\DAYNOTE\position2.PNG)]$

此时，设置了 relative 的元素是相对于当前元素的默认文档流进行定位，而不是相对于父元素进行定位。

3.3、当 `position:absolute;` 时

3.3.1、第一种情况

当父元素都采用 static（非定位）时，子元素使用 absolute 相对于浏览器窗口进行绝对定位。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .outer {
                position: static ; /* 默认的 */
                border: 2px solid blue ;
                width: 400px ;
                height: 300px ;
                margin: 100px auto ;
            }

            .box {
                position: static ; /* 默认的 */
                border: 2px solid red ;
                width: 346px ;
                height: 246px ;
                margin: 25px ;
            }

            .inner {
                border: 2px solid green ;
                width: 292px ;
                height: 192px ;
                margin: 25px ;
            }

            .luck {
                /* 当当前元素的所有父元素都采static定位时，就相对于浏览器窗口来定位 */
                position: absolute ; /* 绝对定位 */
                left : 0 ;
                top : 0 ;
            }

        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner luck"></div>
            </div>
        </div>
        
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VQ6IGE4-1586698448247)(D:\DAYNOTE\position3.PNG)]$

可以看出，蓝色边框的 outer 元素 和 红色边框的 box 元素 均按照默认文档流进行定位，而 绿色边框的 inner 元素 相对于浏览器窗口进行绝对定位，且距离浏览器的左侧和上侧都是 0

3.3.2、第二种情况

当父元素均采用 static定位，且都只设置了外边距为 50px，子元素采用 absolute 定位时，相对于浏览器窗口进行定位。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            /* 通配符选择器 */
            * { 
                border: 1px solid grey ; 
                margin: 50px ; 
            }
            
            .outer {  
                border: 2px solid blue ; 
            }
            
            .box { 
                border: 2px solid red ;  
            }
            
            .inner {
                border: 2px solid green ; 
                height: 200px ; 
            }
            
            .luck {
                /* 当当前元素的所有父元素都采用static定位时，就相对于浏览器窗口来定位 */
                position: absolute ; /* 绝对定位 */
                /* left : 0 ; /* 表示距离浏览器左侧边缘的偏移量 ( 正数向右，负数向左 )*/
                /* top : 0 ; /* 表示距离浏览器顶部边缘的偏移量 ( 正数向下，负数向上 )*/
                bottom : 0 ; /* 表示距离浏览器底边边缘的偏移量 ( 正数向上，负数向下 )*/
                right : 0 ; /* 表示距离浏览器右侧边缘的偏移量 ( 正数向左，负数向右 )*/
                width: 800px ;
                margin: 0 ;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner luck"></div>
            </div>
        </div>
        
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYa6ItCB-1586698448247)(D:\DAYNOTE\position4.PNG)]$

此时，因为 蓝色边框的 outer 元素 和 红色边框的 box 元素 均有50px 的外边距，但因为绿色边框的 inner 元素定位到浏览器窗口的右下角，所以，box元素没有被撑起来的高度（或者说只有边框为2px），但恰巧蓝色边框被box元素的上下外边距各50px撑起来高度为100px（加上边框为102px）

3.3.3、第三种情况

当最近的父元素采用 relative 定位时，子元素采用 absolute 定位是相对于最近的定位父元素进行定位。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .outer {
                position: static ; /* 默认的 */
                border: 2px solid blue ;
                width: 400px ;
                height: 300px ;
                margin: 100px auto ;
            }

            .box {
                position: relative ; /* 相对定位 */
                border: 2px solid red ;
                width: 346px ;
                height: 246px ;
                margin: 25px ;
            }

            .inner {
                /* 相对于 当前元素的第一个非static定位的父元素进行定位 或 相对于浏览器窗口进行定位 */
                position: absolute ; /* 绝对定位 */
                right: 0 ;
                bottom: 0 ;
                border: 2px solid green ;
                width: 292px ;
                height: 192px ;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ekizQHSP-1586698448248)(D:\DAYNOTE\position5.PNG)]$

此时，绿色边框的inner元素 是相对于 红色边框的 box元素 进行定位的。

3.3.4、第四种情况

当爷元素采用 relative 进行定位时，父元素采用 static 进行定位，则此时子元素采用 absolute 相对于爷元素进行定位，依然遵从生成绝对定位的元素，相对于最近的非static属性进行定位。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .outer {
                position: relative ; /* 相对定位 */
                border: 2px solid blue ;
                width: 400px ;
                height: 300px ;
                margin: 100px auto ;
            }

            .box {
                position: static ; /* 默认的 */
                border: 2px solid red ;
                width: 346px ;
                height: 246px ;
                margin: 25px ;
            }

            .inner {
                /* 相对于 当前元素的第一个非static定位的父元素进行定位 或 相对于浏览器窗口进行定位 */
                position: absolute ; /* 绝对定位 */
                right: 0 ;
                bottom: 0 ;
                border: 2px solid green ;
                width: 292px ;
                height: 192px ;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1qrXuYA-1586698448248)(D:\DAYNOTE\position6.PNG)]$

3.3.5、第五种情况

当元素采用 absolute 定位时，高度可以设置百分比、宽度默认为0，需要设置显式宽度进行定位

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .test {
                /* 相对于 当前元素的第一个非static定位的父元素进行定位 或 相对于浏览器窗口进行定位 */
                position: absolute ; /* 绝对定位 */
                right: 0 ;
                top: 0 ;
                border: 2px solid green ;
                height: 50% ; /* 采用绝对定位后，高度可以使用 百分比来设置 */
                width: 150% ; /* 当采用绝对定位后，元素宽度默认是 0 而不是父元素的 100% ，因此需要显式设置宽度 */
            }
        </style>
    </head>
    <body>

        <div class="test"></div>

    </body>
</html>

3.3.6、第六种情况

当元素采用 absolute 定位时，可以设置 top/bottom: 50%; 和 left/right: 50%; 还要设置 margin-top: - 0.5 * height; 和 margin-left: - 0.5 * width; 进行页面居中

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .test {
                height: 400px ;
                width: 600px ;
                /* 相对于 当前元素的第一个非static定位的父元素进行定位 或 相对于浏览器窗口进行定位 */
                position: absolute ; /* 绝对定位 */
                left: 50% ;
                top: 50% ;
                border: 1px solid blue ;
                margin-top: -200px ; /* 顶部外边距取元素高度的一半 向上移动用负值 */
                margin-left: -300px ; /* 左侧外边距取元素宽度的一半 向左移动用负值 */
            }
        </style>
    </head>
    <body>

        <div class="test"></div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiwypEju-1586698448249)(D:\DAYNOTE\position7.PNG)]$

3.3.7、第七种情况

<!DOCTYPE html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位：absolute</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                height: 300px;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .box {
                /*利用 absolute 进行居中定位*/
                position: absolute;
                width: 600px;
                height: 400px;
                left: 50%;
                top: 50%;
                margin-top: -200px;
                margin-left: -300px;
                background-color: gray;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="box"></div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fke8zZsh-1586698448249)(D:\DAYNOTE\position8.PNG)]$

3.4、当 `position: fixed;`时

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

3.4.1、第一种情况

利用 fixed 制作顶栏，将其固定在网页的最上方，滑动页面时不改变位置。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位：position</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                height: 300px;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .top-bar {
                /* 将 顶栏 固定在网页的最上方 */
                position: fixed;
                width: 100%;
                height: 40px;
                top: 0;
                background-color: gray;
                border: 1px solid green;
                text-align: center;
            }
        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="top-bar">顶栏</div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qY119L1V-1586698448250)(D:\DAYNOTE\position9.PNG)]$

3.4.2、第二种情况

同理，我们也可以利用 fixed 制作底栏，宽度设置为80%，给其向右偏移量为10%，目的是让它居中

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位：position</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                height: 300px;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .top-bar {
                /* 将 底栏 固定在网页的最下方,使其水平居中 */
                position: fixed;
                width: 80%;
                height: 40px;
                bottom: 0;
                left: 10%;
                background-color: gray;
                border: 1px solid green;
                text-align: center;
            }
        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="top-bar">底栏</div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zB0frkwH-1586698448251)(D:\DAYNOTE\position10.PNG)]$

3.4.3、第三种情况

利用 fixed 进行居中定位，比较 absolute居中的区别：

absolute居中：元素会随着页面的向下滑动而消失，它是相对于其最近的非定位元素进行居中定位的
fixed居中：元素会固定在页面的中心，它是相对于浏览器视口(viewport)进行居中定位的

<!DOCTYPE html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位：fixed</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                height: 300px;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .box {
                /*利用 absolute 进行居中定位*/
                position: absolute;
                width: 600px;
                height: 400px;
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -300px;
                background-color: gray;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="box"></div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pXHoNnte-1586698448251)(D:\DAYNOTE\position11.PNG)]$

3.5、当 `position:sticky;` 时

基于用户的滚动位置来定位。

元素根据正常文档流进行定位，然后相对它的 最近滚动祖先，基于top, right, bottom, 和 left的值进行偏移，偏移值不会影响任何其他元素的位置。

3.5.1、第一种情况

可以理解为子元素粘着父元素（父元素消失，子元素也消失），但同时又有自己的独立个性（在父元素的位置偏移）

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位：sticky</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            .wrapper { 
                height: 500px;
                line-height: 300px;
                font-size: 100px;
                text-align: center;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .nav {
                position: sticky;
                top : 0;
                left : 0;
                width: 100%;
                height: 100px;
                background-color: grey;
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd">1</div>
        <div class="wrapper even">2</div>
        <div class="wrapper odd third">3
            <div class="nav"></div>
        </div>
        <div class="wrapper even">4</div>
        <div class="wrapper odd">5</div>
        <div class="wrapper even">6</div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOlNz8oQ-1586698448252)(D:\DAYNOTE\position12.PNG)]$

3.5.2、第二种情况

下面这种情况，更能印证 sticky 是针对最近滚动祖先来进行粘性定位

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位：sticky</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            .wrapper {
                height: 500px;
                line-height: 300px;
                font-size: 100px;
                text-align: center;
            }

            .odd {
                background-color: blue;
            }

            .even {
                background-color: red;
            }

            .container {
                border: 1px solid black;
            }

            .nav {
                position: sticky;
                top : 0;
                left : 0;
                width: 100%;
                height: 100px;
                background-color: grey;
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd">1</div>
        <div class="wrapper even">2</div>
        <div class="container">3
            <div class="nav"></div>
            <div class="wrapper odd">4</div>
            <div class="wrapper even">5</div>
            <div class="wrapper odd">6</div>
        </div>
        <div class="wrapper even">7</div>
        <div class="wrapper odd">8</div>
        <div class="wrapper even">9</div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GIJgbLeL-1586698448252)(D:\DAYNOTE\position13.PNG)]$
如有不当之处，欢迎交流指正，转载请注明出处，尊重作者~

Dariuslwk

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
5分钟了解 position 属性

position 属性规定元素的定位类型1、position属性说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。2、position 属性值值描述absolute生成绝对定位的元素，相对于最近的非static属性进行定位；若无非stat...
复制链接

扫一扫