css中的几种定位详解

上课老师讲的几种关于css的定位，讲得很详细，整理了文档，老是翻文档觉得很不方便，所以想以后养成写博客的习惯，记录一些觉得总结得很好的东西。

相对定位不会脱离文档流

绝对定位/固定定位会脱离文档流

---

1.1 文档流

文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。

1.2 脱离文档流

脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

让元素脱离文档流的方法有：浮动和定位。

1.3 默认定位(static)

static：默认值。即没有定位，元素在正常的流中，top，right，bottom，left 和 z‐index 属性无效。

例如：

1.4 相对定位（relative）

relative：生成相对定位的元素，通过 top，bottom，left，right 的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

示例：

总结：

1. 将元素 position 属性设置为 relative 之后，再通过 top，bottom，left，right 属性对其进行相对于原来位置的偏移；
2. 元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；
3. 该元素偏移之后，可能存在覆盖其他元素的情况（可以使用 z-index属性显示层级有限级别）。

1.5 绝对定位（absolute）

absolute：生成绝对定位的元素，不再以自己原来的位置定位，而是以网页的左上角（body）为原定定位。

然而，如果 box2 的父元素当中，有任何一个元素有默认值之外的定位属性，那么 box2的定位将以所有自己的祖先元素中，离自己最近的一个除 static 定位以外的元素的左上角为原点进行定位。

总结：

1. 绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；
2. 绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于 body；
3. 绝对定位的框可以覆盖页面的其他元素。

1.6 固定定位（fixed）

fixed：本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。

1.7 常见问题总结

1. absolute, relative, fixed 偏移的参考点分别是什么？

absolute 偏移的参考点是：相对于最近的已定位的父元素，如果没有，则相对于 body 元素；

relative偏移的参考点是：相对于元素在普通流中的原来位置；

fixed偏移的参考点是：相对于浏览器窗口。

2. z-index有什么作用? 如何使用?

z‐index 属性用于设置节点的堆叠顺序，拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。

注意：

z-index 仅对定位元素有效（position:relative||absolute||fixed）;

z-index 只可比较同级元素

3. position:relative 和负 margin 都可以使元素位置发生偏移，二者有什么区别？

二者的区别表现在：

相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。

负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；

4. 如何让一个固定宽高的元素在页面上垂直水平居中?

可以使用绝对定位和负 margin。

实例：

注意：元素的垂直居中有多种做法，每种做法都有许多限制条件，没有一种方法可以在任何时候适用。

例如这种方法就只适合元素对于整个网页居中的时候，而无法相对于某个元素居中。

5. 文档流、定位和父子元素高度之间的关系?

对于正常 static 定位，如果不对父元素设置高度，那么父元素的高度应该是所有自元素的高度之和。

如果使用相对定位，那么元素不会脱离文档流，父元素的高度还是其所有元素高度之和，但是相对定位的元素，可能超过父元素的范围。

如果使用绝对定位，那么元素会脱离文档流，父元素在计算高度的时候，会好像绝对定位的子元素不存在一样。

对于固定定位的情况，结果和绝对定位一致

6. 定位和父子元素宽度之间的关系?

对于 div 元素来说，它是块级元素，如果我们不设置其宽度，那么其宽度将和其父容器宽度一致

当设置 box2 为相对定位之后，其不影响 box2 的宽度。

当设置 box2 为绝对定位时，box2 的宽度将由其内容决定。

如果当父元素设置为绝对定位之后，其宽度将由其中最大的元素的宽度决定。

如果相互嵌套的几层父子元素都设置绝对定位，那么里层的元素会脱离文档流，从而无法支撑起外层元素的宽度。

如果内存元素当中还有其他元素，包含了 box1，box2 和 box3，那么其宽度将受到 inner 元素的限制，即无论它的内容多长，其宽度总是受到 inner 元素宽度的限制。

然而，new 元素的内容是一个不可分割的文本，那么它就可以撑开整个元素的宽度。