关于CSS定位中的位置
2016-07-10 本文已影响360人
婷楼沐熙
刚刚学习了定位，一开始还是比较晕的，特别是关于里面的各种相对位置，不知道它们的坐标具体是怎么算的。所以这里特别的记录一些影响到定位当中位置的一些东西。
一、盒模型
在聊位置之前，我们先来看看之前说过的盒模型。
盒模型
我们从内到外来看看这个盒模型。
- 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为正值的定位元素。
感觉定位这一块还有许多要学习的东西，以后再来慢慢积累吧。
