学了一段时间的前端了，但是有时候回过头来却发现，很多自以为自己已经掌握了的知识点其实还存在很多的漏洞，甚至有些东西自己一直都理解错了。之所以会想要去探究今天的这个知识点，也是因为自己在用position属性去实现水平垂直居中过程中发现了一些比较困惑的地方。
所以决定重新思考一下，CSS中的position属性。
1 position:absolute
概念：绝对定位的元素从文档流中脱离，并相对于其包含块进行定位，包含块由最近的position属性为relative，fixed，absolute的祖先元素所决定，如果不存在这样的祖先元素，（也就是无依赖绝对定位），则其包含块就是初始包含块。
!!敲黑板敲黑板！！！这里的初始包含块绝对不是你想象中的body元素或者html元素，后面我会用例子去证明一下咯。
你可能需要先理解什么是初始包含块。
初始包含块：根元素存在的包含块称为初始包含块。对于连续媒体（如电脑浏览器），初始包含块是视口（viewport）大小的矩形。
你可以点击查看包含块的详细概念： 包含块概念
视口的示意图
所以，当绝对定位的元素没有找到最近的非static定位的元素是，会继续向上查找，会相对于最初的包含块去定位。而不是相对于<body>和<html>
当然，这一点要与相对定位的特点区分开，相对定位它的包含块是它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框创建。
这里插播一句，你可能还不知道为什么这里会反复强调包含块，其实这个包含块的概念是相当重要的，相对定位和绝对定位的定位以及元素的尺寸和位置经常都是与包含块的概念相关的。
例如，你给一个定位的元素设置top ,left ,right,bottom值为百分比%的时候，你要清楚这是相对于谁的百分比，left和right参照的是包含块的宽度，top和bottom参照的是包含块的高度。所以需要弄清楚包含块的概念。
2 无依赖的绝对定位
我相信我们使用绝对定位的时候，都会习惯性地给该元素设置一个父元素，同时给父元素设置相对定位。但是其实也可以不要设置非static定位的父元素，结合margin属性来进行定位。我的理解是，绝对定位能单独用就尽量单独用，而不要再去设置相对定位的父元素。对整体的页面布局影响也会比较小。
举个栗子：
一 图标定位
解决方案：
1 父元素设置相对定位，图标设置绝对定位，再去调整top left的属性值。
2 设置图标为绝对定位，再根据margin值去调整。
我觉得张鑫旭大神在讲到绝对定位的非绝对用法的时候，其中举到的文字阴影效果就不错。 张鑫旭传送门
二 伸展容器
我们知道，有时候需要设置元素的宽和高为100%，即width = 100%，height=100%。但是有时候元素的包含块没有设置宽度和高度，该方法就会失效。
所以可以通过 设置绝对定位之后，设置 top=0，left=0，right=0，bottom=0来达到满屏拉伸元素的效果。
三 水平垂直居中
当尺寸限制、拉伸 与 margin:auto 同时出现时，就能实现绝对居中效果。
div {
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
width:50%;
height:50%;
margin:auto;
}
四。通过相对定位，绝对定位实现水平垂直居中的区别来进一步认识这两个定位的 包含块 的区别。
一直以来我觉得相对定位和绝对定位最混淆我们的就是，有时候我们会搞不懂这两个的区别。
相对定位 是元素相对于元素本身原来的位置进行偏移，那么我们在设置left和top值为百分比的时候，又是相对于什么元素的百分比呢？其实就是相对定位元素的 包含块。
绝对定位 是元素相对于最近的非static定位的父元素的位置偏离。如果没有这样的元素，则是相对于初始包含块，也就是视口的大小，其实也就是浏览器的显示大小。
其实写到这里也不难理解，可以看看以下的代码
// 写一个相对定位元素，因为这个相对定位的元素没有包含其内容的父元素，所以其包含块其实就是body标签了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 100%;
height: 100%;
position: relative;
background: red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
来看一下这个例子：
// 这个是设置成了绝对定位的元素，设置宽度和高度都是百分百。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 100%;
height: 100%;
position: absolute;
background: red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
思考一下，这两个会是什么结果呢？
设置相对定位的元素高度为0
设置绝对定位的元素高度不为0，是屏幕高度的百分百
为什么设置成相对定位和绝对定位的会有这样的不同结果呢？其实就是因为设置相对定位的元素的包含块是相对与body标签，而设置了绝对定位的元素是相对于最初始的包含块。再次拿出包含块的概念链接 http://www.ddcat.net/blog/?p=1336
思考一个问题： 如果现在要让一个块元素水平垂直居中，分别用相对定位和绝对定位来做，你会怎么做呢？
绝对定位的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width:540px;
height:400px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
相对定位的方法：
// 这里需要将body元素用绝对定位的方法给撑开，这样设置相对定位的偏移的百分比就是相对于被撑开的body标签了。否则body的高度不是满屏的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.container {
width:540px;
height:400px;
position: relative;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
嗯，我觉得理解了包含块的概念对真正理解绝对定位和相对定位的作用 是很大的。建议先好好看看这部分的内容，记住，绝对定位的元素从文档流中脱离，并相对于其包含块进行定位，包含块由最近的position属性为relative，fixed，absolute的祖先元素所决定，如果不存在这样的祖先元素，（也就是无依赖绝对定位），则其包含块就是初始包含块，也就是viewport。这一点和相对定位是不同的。
网友评论