DEV Community
·
掌握CSS定位：初学者指南
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在网页布局中，CSS定位有五种方式：静态（默认，按文档流排列）、相对（可调整位置）、绝对（脱离文档流，基于最近定位祖先）、固定（相对于视口，随页面滚动不变）和粘性（结合相对与固定，达到特定滚动位置后粘附）。
🎯
关键要点
- 在网页布局中，CSS定位有五种方式：静态、相对、绝对、固定和粘性。
- 静态定位是所有HTML元素的默认位置，元素按文档流排列，无法使用top、left、right或bottom。
- 相对定位使元素相对于其正常位置进行调整，仍然占据布局空间。
- 绝对定位将元素从正常流中移除，并相对于最近的定位祖先进行定位。
- 固定定位使元素相对于视口定位，页面滚动时元素位置不变，常用于导航栏和按钮。
- 粘性定位结合了相对和固定，元素在达到特定滚动位置后会粘附。
- 使用相对定位可以轻微调整元素而不影响文档流。
- 使用绝对定位可以在容器内获得完全控制。
- 使用固定定位适用于需要保持可见的UI元素。
- 使用粘性定位可以提升用户在滚动时的体验。
❓
延伸问答
CSS定位的五种方式是什么？
CSS定位的五种方式是静态、相对、绝对、固定和粘性。
什么是静态定位，它有什么特点？
静态定位是所有HTML元素的默认位置，元素按文档流排列，无法使用top、left、right或bottom。
相对定位和绝对定位有什么区别？
相对定位使元素相对于其正常位置进行调整，仍然占据布局空间；而绝对定位将元素从正常流中移除，基于最近的定位祖先进行定位。
固定定位适合用于哪些场景？
固定定位适用于需要保持可见的UI元素，如导航栏、聊天窗口或返回顶部按钮。
粘性定位是如何工作的？
粘性定位结合了相对和固定，元素在达到特定滚动位置后会粘附在视口上。
使用绝对定位时需要注意什么？
使用绝对定位时，元素会脱离正常文档流，并相对于最近的定位祖先进行定位，如果没有定位祖先，则相对于<html>或<body>。
➡️
