大家好，我是IT修真院郑州分院第五期学员王姝丽，一枚正直善良的web程序员。
今天和大家分享一下，修真院官网css3任务中，position定位。
1.背景介绍
CSS中一共有三种基本定位机制：普通流、浮动、绝对定位。 如果不进行专门指定，所有的标签都在普通流中定位。 块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。
CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）
2.知识剖析
static是position属性的默认值，无特殊定位。然后既然是默认值，是不是就没有用了，其实static也是很有用的，当两个页面同时需要用到同一个样式时，一个需要定位，另一个不需要时，就可以用到position：static；
position: relative; 相对定位。 相对于自己原本的位置进行定位。 在文档流中，元素偏移前的位置保留。 一般用于给absolute元素一个定位参照物。 该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性。
position: absolute; 绝对定位。 相对于第一个设置了定位属性除了static定位以外的祖先元素进行定位，如果当前父元素没有定位属性，那么就会一直向上寻找，如果都没有，那么会相对于html元素定位。 脱离文档流。
position: fixed; 固定定位 相对于浏览器窗口进行定位，当滚动页面时，具有position:fixed;属性的元素不会随滚动条滚动。 脱离文档流。 一般用于页面的广告，固定顶栏等。
3.常见问题
（1）如何让一个固定宽高的元素在页面上垂直水平居中?
（2）什么是z-index？
4.解决方案
（1）可以配合使用margin: 块级元素宽高的一半的负值; 实现块级元素的垂直居中。
（2）如果这个页面是二维的，那z-index就处于三维中，如图所示：
z-index 这个属性控制着元素在z轴上的表现形式。
堆叠顺序是当前元素位于z轴上的值。数值越大表明元素的堆叠顺序越高，越靠近屏幕。离我们眼睛所看到的越近。
就像这样的
5.扩展思考
fixed属性一般都用来做什么？
6.参考文献
参考一：静如秋月的博客
参考二：Pet的博客
6.更多讨论
浮动和对其他元素的影响
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
我的学习邀请码：12164783 或者你可以直接点击此链接：http://www.jnshu.com/login/1/12164783
