一、盒模型

在聊位置之前，我们先来看看之前说过的盒模型。

盒模型

我们从内到外来看看这个盒模型。

Content edge：它也叫做inner edge，它所围成的区域代表的是具体的内容，所确定的范围叫做content box，也就是盒模型计算方法box-sizing的默认值content-box的范围。
Padding edge：它所确定的就是内边距padding的区域。
Border edge：确定border的区域。
Margin edge：确定margin，也就是外边距的区域。

二、定位中“位置”的计算

relative和absolute联合使用的情况
在定位当中，我们经常把position: relative；和position: absolute;配合使用，这就相当于建立了一个坐标系，根据坐标来进行偏移，那么这个坐标系具体长什么样，原点又在哪里呢？
这里的坐标系和数学当中的有一定的差别，它们的X轴方向都是水平向右，但是这里的Y轴方向是垂直向下的。
我们都知道设置了绝对定位的元素，它的位置偏移是相对于最近的设置了定位（static定位除外）的祖先元素（如果没有满足的祖先元素，则相对body进行位置偏移。）的左上角，这个左上角到底具体指什么，是margin内边界或外边界、border内边界或外边界、还是padding内边界或者外边界呢？那我们来看看它的坐标原点到底是在是在哪里。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>定位</title>
    <style>
    .container{
        position: relative;
        width: 200px;
        height: 200px;
        margin: 40px;
        padding: 40px;
        background: pink;
        border: 5px dashed;
    }
    .box{
        position: absolute;
        width: 100px;
        height: 10px;
        margin: 20px;
        padding: 20px;
        background: yellow;
        border: 5px dashed;
        top: 0px;
        left: 0px;

    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

定位的坐标原点
在上面的例子当中，我们把box的坐标设为（0，0）。通过上面的效果图可以知道，container和box的border距离为20px，这就是box的margin。所以可以得出的结论是，在relative和absolute结合使用的情况下，构成坐标原点的是padding edge的左上角，这就是我们经常说的相对于祖先元素的左上角的那个角进行的偏移。而我们给绝对定位设置的坐标就是这个元素的margin edge的左上角。所以如果对定位元素设置了坐标（left、top、bottom、right）的话，一般不要设置margin，不然很难进行精确的定位。

单一定位的情况
当我们使用单一的定位时，比较容易理解。它的坐标原点就是margin edge的左上角，所有的位移都是根据这个原点进行偏移。比如说设置为相对定位，它就是根据自己左上角的margin edge进行偏移。

三、包含块

如果祖先元素能为后代生成包含块的情况下，构成XY相对坐标系的准确来说其实是包含块，不一定是父级元素。我们先来看看包含块的定义：

CSS包含块是CSS的视觉可视化模型的一个重要的基本概念，因为每个元素都是相对于其包含块摆放的。也就是说，元素的包含块为元素的尺寸和位置的计算提供了参考，是元素的“定位上下文”。

元素的包含块与它的定位方式相关，定位方式不同，包含块也不一样，下面分情况进行说明。

根元素
根元素的包含块叫做初始包含块，初始包含块是一个视口大小的矩形。在HTML当中，根元素就是html元素。默认条件下，html元素为包含块，其中一些浏览器也会把body设为包含块。
非定位元素和相对定位元素
对于没有设置绝对定位（position: absolute）的非根元素，例如：position: static和position: relative，包含块设置为最近的块级元素祖先的内容区的边缘，而不是margin和padding边缘。
绝对定位元素
设置了绝对定位的元素，它的包含块是距离它最近的设置了定位的祖先元素（static除外）。祖先元素可以是块级元素，也可以是行内元素，具体来说分为以下几种情况：
如果祖先元素为块级元素，那么包含块为该元素的内边距边界，也就是padding edge。
如果祖先元素为行内元素，那么包含块为该祖先元素的内容边界，也就是content edge。
如果没有上述符合条件的定位祖先元素，那么包含块就是初始包含块。
固定定位元素
对于固定定位元素position: fixed，它的包含块就是视口本身。

四、定位当中的一些小知识点

position: relative不会改变行内元素的display属性，而position: absolute会改变行内元素的display属性，它将会由inline变成block。所以如果设置了absolute，可以不将元素display改成block。
块级元素在设置了position(relative/static)的情况下width为100%，但是如果设置了position: absolute，width将会变成auto，它会受到父元素的宽度影响。
元素设置了定位之后，如果没有设置top、bottom、left、right属性的话，定位将不会起作用。
上下margin不会在绝对定位的元素上进行边距合并。
重叠
如果有重叠，就要考虑覆盖关系。定位（absolute和fixed）、浮动、普通流的覆盖位置从下到上依次为：
z-index为负的定位元素。
普通流的非行内元素。
浮动元素。
普通流的行内元素。
z-index为auto或0的定位元素。
z-index为正值的定位元素。