前端 CSS 面试题, CSS 的 position 有哪些属性值,区别是什么?
前端 CSS 面试题, CSS 的 position 有哪些属性值,区别是什么?
QA
Step 1
Q:: CSS 的 position 属性有哪些值，它们之间的区别是什么？
A:: CSS 的 position 属性有五种主要的值：static、relative、absolute、fixed 和 sticky。
1. static：默认值，元素按照正常的文档流排列，不受 top, right, bottom, left 属性的影响。
2. relative：元素仍然处于文档流中，但可以通过 top, right, bottom, left 属性相对于其原始位置进行偏移。
3. absolute：元素脱离文档流，相对于最近的定位祖先元素（不为 static 定位的元素）进行定位。如果没有定位祖先元素，则相对于初始包含块（通常是 body 元素）定位。
4. fixed：元素脱离文档流，相对于浏览器窗口进行定位，即使滚动页面，元素也会固定在指定位置。
5. sticky：元素在跨越指定的阈值（例如，top: 10px）之前表现为 relative，当滚动到该阈值后表现为 fixed。
Step 2
Q:: 使用 position: absolute 的元素会占据父元素的空间吗？
A:: 不会。使用 position: absolute 定位的元素会脱离文档流，不再占据其父元素的空间，这意味着其原本在文档流中的位置将空出，不会影响其他元素的布局。
Step 3
Q:: 如何使一个元素固定在屏幕的底部，即使页面滚动也不改变位置？
A:: 可以使用 position: fixed; 来实现这一效果。你可以设置元素的 bottom 属性为 0，确保它固定在屏幕底部。例如：position: fixed; bottom: 0; 这样即使页面滚动，元素也会始终固定在浏览器窗口底部。
Step 4
Q:: sticky 定位有哪些应用场景？
A:: sticky 定位常用于制作滚动效果，尤其是当需要元素在某个位置固定一段时间，而后在某个位置继续随着页面滚动。例如，在页面顶部导航栏可以设置 position: sticky; top: 0;，这样在用户滚动页面时导航栏会在到达页面顶部时固定住，方便用户持续访问导航栏。