一文搞懂position各种定位

position有哪些值？

CSS 中的 position 属性用于控制元素的定位方式。它有以下几种取值：

static（默认值）：元素在正常文档流中定位，不受 top、right、bottom、left 或 z-index 影响。
relative：元素在正常文档流中定位，但是可以通过设置 top、right、bottom、left 来相对于其正常位置进行偏移。相对定位不会脱离文档流，仍然会占据原来的空间。
absolute：元素从文档流中脱离，相对于最近的非 static 父元素进行定位。如果没有非 static 的父元素，那么会相对于文档的初始包含块（即视口）进行定位。绝对定位不会保留原来的空间，不影响其他元素的布局。
absolute 的元素是以最近的父元素还是兄弟元素的定位为基准？
在CSS中，使用 position: absolute; 定位的元素是以最近的已定位（非 static）的祖先元素为基准进行定位，而不是以兄弟元素为基准。这意味着它会相对于最近的具有定位属性（如 position: relative;、position: absolute;、position: fixed; 或 position: sticky;）的祖先元素进行定位。
如果没有找到已定位的祖先元素，那么绝对定位元素将相对于最初的包含块（通常是视口）进行定位。这就是为什么通常需要为绝对定位元素的父元素设置 position: relative; 或其他定位属性，以确保它们按预期进行定位。
兄弟元素的定位与绝对定位元素本身没有直接关系，它们不会作为基准用于绝对定位元素的位置计算。
如果父元素没有relative，而父元素的父元素有呢？
如果一个元素的直接父元素没有设置 position: relative;，但其父元素的父元素（即祖先元素）设置了 position: relative;，那么该元素会相对于最近的具有 position: relative; 属性的祖先元素进行定位，而不是相对于其直接父元素。
这是因为绝对定位元素（position: absolute;）在寻找定位基准时会向上遍历元素的祖先元素，直到找到具有 position: relative;、position: absolute;、position: fixed; 或 position: sticky; 的元素，然后相对于这个元素进行定位。
fixed：元素从文档流中脱离，相对于视口进行定位。即使页面滚动，元素也会始终保持在视口的相同位置。固定定位也不会保留原来的空间，不影响其他元素的布局。

sticky：粘性布局，position: sticky 是一种相对较新的定位方式，它允许元素在滚动到指定位置时变为固定定位（类似于 position: fixed），而在其他情况下保持相对定位（类似于 position: relative）。这种定位方式通常用于创建吸附效果，例如在页面滚动时，导航栏在一定位置固定在顶部。

一句话：当没有滚动到设置了position: sticky的元素时，这个元素就是相对定位，当滚动到了之后就会变成固定定位fixed！
滚动到：也就是position: sticky的元素在容器（带有滚动条的容器）中即将超出可视范围的位置，就会触发fixed！

例子：

html

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
	  /*height: 2000px ;*/ /* 在这里设置没有用 */
    }

    .container {
      height: 2000px ; /* 这个必须有，必须保证它的上一级父元素出现滚动条 */
    }

    .navbar { /* 滚动到这里的时候就会出现吸附的效果 */
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
      position: sticky;
      top: 0; /* 固定位置的偏移值 */
    }
  </style>
</head>

<body>
  <p style="height:200px;border: 1px #e8604c solid;">你好呀，欢迎光临！</p>
  <div class="container">
    <h1>Sticky Navbar</h1>
    <div class="navbar">
      <h1>Sticky Navbar</h1>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      <!-- 这里添加更多内容以产生滚动效果 -->
    </div>
  </div>

</body>

吸附的效果是怎么样的，以及出现吸附的条件：当 sticky 元素的父元素（the nearest scrollport，最近的滚动容器）出现滚动条的时候，并且滚动条滚动到了sticky 元素即将超出可视范围的位置，sticky 元素距离到设置的位置如（top: 0）时会表现为 fixed（会固定在顶部实现吸附的效果）

没有滚动到这里的时候：就是正常的随着其他元素进行滚动！

滚动到了之后：吸附在顶部，不会随着其他元素被滚动走！

一文搞懂position各种定位 ​

position有哪些值？ ​

​

一文搞懂position各种定位

position有哪些值？