css position fixed

作者：空白篇pia~ 发布日期:2025-05-26 浏览:37

<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
</head>
<body>

<div class="fixed">
  我是一个固定定位的元素，滚动页面时我会保持在相同的位置。
</div>

<p>这是一个普通的段落。</p>
<p>继续滚动页面，你可以看到固定定位的元素始终停留在页面的右下角。</p>

</body>
</html>

解释说明：

position: fixed;：使元素相对于浏览器窗口进行定位，而不是相对于其包含块。即使页面滚动，该元素也会保持在指定的位置。
bottom: 0; 和 right: 0;：将元素固定在浏览器窗口的右下角。
width: 200px;：设置元素的宽度为200像素。
background-color, border, padding：这些样式用于美化和布局，使元素更易于识别。

通过这种方式，你可以创建一个始终位于页面某个固定位置的元素，例如浮动的工具栏或通知框。

上一篇：react css

下一篇：css箭头