面试题：CSS中position为relative和absolute的差异

Question

请详细阐述在CSS中，position属性设置为relative和absolute时，元素的定位方式、对文档流的影响以及它们在实际应用场景中的区别。

Answer 1

position: relative

1. 定位方式：
   • 相对定位是相对于元素本身在文档流中的初始位置进行定位。通过 top、bottom、left 和 right 属性来偏移元素的位置。例如，如果设置 top: 50px，元素会从其初始位置向下移动50像素。
2. 对文档流的影响：
   • 元素仍然占据其在文档流中的原始空间，其他元素的布局就像该元素没有进行定位一样。也就是说，相对定位不会使元素脱离文档流。
3. 实际应用场景：
   • 微调元素位置：比如想要对某个标题或者图片在其原位置基础上进行小范围的偏移，以满足特定的视觉设计需求。例如，将一个导航栏菜单项稍微向右移动一点，使其与旁边的元素有更好的间距。
   • 作为绝对定位元素的参考容器：当一个元素设置为 position: relative 时，它的后代元素如果设置 position: absolute，那么这些绝对定位的后代元素会相对于这个相对定位的祖先元素进行定位。

position: absolute

1. 定位方式：
   • 绝对定位是相对于最近的已定位（position 值不是 static，如 relative、absolute、fixed 等）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）。例如，一个绝对定位的元素，其最近的已定位祖先元素设置了 left: 100px，那么这个绝对定位元素在水平方向的位置计算会基于该祖先元素的左边缘再加上 left 属性设置的值。
2. 对文档流的影响：
   • 元素会完全脱离文档流，不再占据原来在文档流中的空间。其他元素的布局会忽略该元素，就好像它不存在一样。
3. 实际应用场景：
   • 创建浮动元素：比如创建一个悬浮在页面某个区域上方的广告条或者提示框。这些元素需要脱离文档流，不影响其他内容的布局。
   • 实现复杂的布局设计：在一些复杂的网页布局中，需要将某些元素精确地放置在页面的特定位置，不考虑文档流的正常排列。例如，一个图片库中，每个图片上的标题和描述文字可以通过绝对定位精确地放置在图片上的合适位置。