面试官：有哪五种定位
原文中文，约2700字，阅读约需7分钟。
📝
内容提要
CSS的position属性有五个特定值：static、relative、absolute、fixed和sticky。它们分别用于不同的定位方式。其中，static是默认值，元素在文档流中不会被特别定位；relative是相对于元素在文档流中的初始位置进行定位；absolute是相对于最近的已定位（非static）的祖先元素进行定位；fixed是相对于浏览器窗口进行定位，即使窗口滚动，元素也会停留在指定位置；sticky是在relative和fixed定位之间切换，基于滚动位置。定位元素可以使用top、right、bottom和left属性来调整位置，以及z-index属性来控制堆叠次序。定位类型的使用需要注意文档流的影响、堆叠次序、功能、兼容性和滚动条等问题。实际应用中，可以通过子绝父相和吸顶作用来实现特定效果。
❓
Q&A
CSS的position属性有哪些值？
CSS的position属性有五个特定值：static、relative、absolute、fixed和sticky。
相对定位和绝对定位有什么区别？
相对定位是相对于元素在文档流中的初始位置进行定位，而绝对定位是相对于最近的已定位（非static）的祖先元素进行定位。
什么是sticky定位，它的特点是什么？
sticky定位结合了相对和固定定位的特性，当页面翻滚到特定位置时，元素会固定在视窗的某个位置。
使用z-index时需要注意什么？
使用z-index时要小心，确保不会出现意外的覆盖情况，数值越大，元素越靠上。
固定定位会对页面布局产生什么影响？
固定定位会使元素脱离正常文档流，可能影响其他元素的布局，并可能导致长内容页面出现不必要的滚动条。
如何实现CSS中的吸顶效果？
可以使用position: sticky属性，使元素在翻滚到特定位置时固定在页面顶部。
🏷️
