position的fixed用法
"position: fixed" 是一种CSS属性，用于将一个元素的位置固定在屏幕上的某个位置，不随页面滚动而改变。
使用 "position: fixed" 时，元素的位置是相对于浏览器窗口的，而不是相对于其父元素或文档的。这使得元素会保持不动，无论用户如何滚动页面。
以下是几个常见的使用场景和用法示例：
1. 悬浮导航栏：
css
.navbar {
  position: fixed;
  top: 0;  设置元素顶部与浏览器窗口顶部的距离
  width: 100%;  设置元素的宽度
}
在上述示例中，.navbar 元素将会在屏幕顶部固定，并且随着用户滚动页面保持不动。
2. 固定的侧边栏：
css
.sidebar {
  position: fixed;
  top: 50%;  设置元素顶部距离屏幕顶部的距离为50%
  left: 0;  设置元素左侧与浏览器窗口左侧的距离为0
  transform: translateY(-50%);  使用transform属性将元素向上偏移自身高度的一半
}
在上述示例中，.sidebar 元素将会固定在屏幕的左侧，并且始终保持在屏幕垂直中央。
3. 固定的通知栏：
css
.notification {
  position: fixed;
  top: 10px;  设置元素顶部与浏览器窗口顶部的距离为10px
  right: 10px;  设置元素右侧与浏览器窗口右侧的距离为10pxcss中的position属性
}
在上述示例中，.notification 元素将会固定在屏幕的右上角，并且始终保持在指定的距离內。
需要注意的是，使用 "position: fixed" 时，元素的宽高尺寸仍然会占用页面空间，其他元素
可能会被遮挡。为了避免这种情况，通常需要通过设置合适的上下文环境（如父容器的高度）或使用其他方式（如JavaScript）来确保页面排版和内容的正常显示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。