position定位的基准问题

最新推荐文章于 2023-06-04 22:58:10 发布

孤枫_J

最新推荐文章于 2023-06-04 22:58:10 发布

阅读量3.1k

点赞数 1

分类专栏： HTML+CSS 文章标签： position

本文链接：https://blog.csdn.net/qq_35809245/article/details/53637512

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一咱们先来看下W3C上的定义：

1 position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。注意：static和relative仍然占据标准流的位置。
static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

二重点来看absolute ：

1 当父元素设置了除static定位之外的定位的时候，（也就是说父元素可以是absolute relative )，子元素相对于父元素定位，可是相对于父元素哪里定位呢？这个时候，基准是父元素的内容区（也即是content（width+height）+padding区域，不包括border和margin。
2 当父元素没有设置定位的时候，子元素相对于body进行定位。
3 子元素定位的边界是包括子元素的整体 = margin + border + padding + content ;的margin外边界为基准进行定位。

三代码解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
    .one{
        width: 980px;
        height: 300px;
        margin: 0 auto;
        background-color: pink;
    }
    .two {
        height: 200px;
        width: 400px;
        float: left;
        background-color: blue;
        /*padding-left: 100px;*/
        margin-left: 100px;
        position: relative;
        border: 30px solid green;

    }
    .three{
        position: absolute;
        width: 15px;
        height: 15px;background-color: red;
        /*left: 0;
        left: 20px;
        left: -20px;
        bottom: 10px;*/
    }
    </style>
    </head>
    <body>
        <div class="one">
            <div class="two">
                <div class="three">  </div>
            </div>
        </div>
    </body>
    </html>

该案例重点理解子元素定位的基准，当父元素设置了除static定位之外的定位的时候，子元素相对于父元素定位，可是相对于父元素哪里定位呢？这个时候，基准是父元素的内容区（width+height）+padding，不包括border和margin