关于定位position:relative & absolute

最新推荐文章于 2023-10-21 09:42:12 发布

airor12345

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/leoorpio/p/5326572.html

版权

定位

父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的

position:static 默认值，无特殊定位，元素遵循HTML定位规则；

position:absolute 表示绝对定位，元素以块元素（block element）的形式脱离所处的文档流，相对于position属性非static值的最近父级元素进行偏移，body为父元素则定位于浏览器左上角（top：0；left：0）。可通过top、left、bottom、right等属性相对于其最近的具有定位设置的父元素进行绝对定位。

postion:relative 表示相对定位，不脱离文档流，保留原占位。可以使用left、right、top、bottom等属性在在文档流中的偏移位置，但元素不可重叠；

偏移默认是以父级元素左上角（top:0 ; left:0）进行偏移

一下为几种组合情况

    <!-- html代码 -->
    <div id="container">
        <div class="main">
            
        </div>
    </div>

        /* CSS代码 */
        body {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            position: static;   /* 父元素 */
        }

        .main {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            position: relative;     /* 子元素 */
            top: 50px;
            left: 50px;
        }

示例图

组合类型（没有讨论fixed 固定定位情况）：

static & relative
static & absolute

父元素：static
子元素：relative
子元素相对于父元素：以父元素（div id="container"）左上角（top：0; left:0;）为坐标原点，偏移top：50px; left：50px

父元素：static
子元素：absolute
子元素相对于父元素：注意子元素绝对对位，由于父元素（div id="container"）定位属性为默认值static，子元素将脱离父元素的文档流。距离最近父级元素（body 元素）进行偏移，偏移top：50px; left：50px

absolute & relative
absolute & absolute

父元素：absolute
子元素：relative
子元素相对于父元素：由于父元素（div id="container"）定位属性为absolute，此时父元素将脱离body元素的文档流，离最近的父级元素（body 元素）进行偏移，默认为（top：0; left:0）;对于子元素，其定位属性值为relative，子元素相对于position属性非static值的最近父级元素进行偏移。也就是相对于父元素（div id="container"）偏移。偏移top：50px; left：50px

父元素：absolute
子元素：absolute
子元素相对于父元素：由于父元素（div id="container"）定位属性为absolute，此时父元素将脱离body元素的文档流，离最近的父级元素（body 元素）进行偏移，默认为（top：0; left:0）;对于子元素，其定位属性值为absolute，子元素将脱离文档流相对于position属性非static值的最近父级元素进行偏移。也就是相对于父元素（div id="container"）偏移。偏移top：50px; left：50px。

relative & absolute
relative & relative

父元素：relative
子元素：absolute
子元素相对于父元素：由于父元素（div id="container"）定位属性为relative;对于子元素，其定位属性值为absolute，子元素将脱离文档流相对于position属性非static值的最近父级元素进行偏移。也就是相对于父元素（div id="container"）偏移。偏移top：50px; left：50px

父元素：relative
子元素：relative
子元素相对于父元素：由于父元素（div id="container"）定位属性为relative;对于子元素，其定位属性值为relative，子元素相对于position属性非static值的最近父级元素进行偏移。也就是相对于父元素（div id="container"）偏移。偏移top：50px; left：50px

归纳

absolute绝对定位会脱离原先的文档流，相对于position属性非static值的最近父级元素进行偏移；
relative相对定位不会脱离文档流，二是占据原有的位置，相对于position属性非static值的最近父级元素进行偏移。

疑问

在尝试把#container这个父元素浏览器居中显示时发现，如果设定position:relative; 
top属性值以百分号（percentage）为单位时，会失效。此时元素会贴在浏览器；
而left以百分号为单位却能正常显示
如果设定position:absolute;百分号为单位可以正常显示。

示例图二

思路：

在父级元素（div id="container"）定位属性为 position:relative 的前提下；top单位换为px，可以正常显示；

假设一：是不是最外层的父级元素会这样？

我尝试在body设置position，但是没有变化，再加上width 和 height 值，还是没有效果；
于是我把div( id="container")元素嵌套在div（class="wrap"）元素下，并设定width和height值。发现此时的top (单位%)有效了，如果去掉width 和 height 值，无效。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">

        body {
            margin: 0;
            padding: 0;
        }
            
        /*  
        .wrap {
            width: 700px;
            height: 700px;
            border: 1px solid #abc;
        }
        */
        #container {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative; /* 父元素 */
            top: 20%;            /* 无效 */
            left: 20%;
        }

        .main {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: relative;     /* 子元素 */
            top: 50%;
            left: 50%;
        }

        .inner {
            width: 100px;
            height: 100px;
            border: 1px solid #bbb;
            position: relative;
            top: 10%;
            left: 10%;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div id="container">
        <div class="main">
            <div class="inner"></div>
        </div>
    </div>
</div>
</body>
</html>

这是什么原因呢？
后期再回来解答。

转载于:https://www.cnblogs.com/leoorpio/p/5326572.html

airor12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于定位position:relative & absolute

定位父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的position:static 默认值，无特殊定位，元素遵循HTML定位规则；position:absolute 表示绝对定位，元素以块元素（block element）的形式脱离所处的文档流，相对于position属性非static值的...
复制链接

扫一扫