如何用css position实现元素固定定位-css教程-PHP中文网

如何用css position实现元素固定定位

P粉602998670

发布： 2025-09-25 13:20:02

原创

741人浏览过

使用 position: fixed 可使元素固定在视窗特定位置，如顶部导航栏（top: 0）、右侧侧边栏（right: 0）、底部工具栏（bottom: 0）或悬浮按钮（bottom: 20px, right: 20px），元素脱离文档流且随视口定位，需注意层级控制（z-index）、覆盖问题及移动端兼容性，避免父元素 transform 导致失效。

如何用css position实现元素固定定位

要让元素在页面滚动时始终保持在视窗的某个位置，比如顶部、底部或角落，可以使用 CSS 的 position: fixed 实现固定定位。这种方式常用于导航栏、返回顶部按钮或悬浮广告等场景。

使用 position: fixed 基本语法

将元素的 position 属性设置为 fixed，并配合 top、right、bottom、left 等属性来确定其在视口中的位置。

示例：固定在页面顶部

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px 0;
  z-index: 1000;
}

登录后复制

这个元素会始终停留在浏览器窗口的顶部，即使页面滚动也不会移动。