大家好，我是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.更多讨论

浮动和对其他元素的影响

ppt链接

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

我的学习邀请码：12164783    或者你可以直接点击此链接：http://www.jnshu.com/login/1/12164783