四、固定定位¶

TIP

固定定位本质

固定定位是相对于浏览器窗口（视口）进行定位。但固定定位元素的祖先的 transform、perspective、filter或 backdrop-filter属性非 none时，固定定位相对于该祖先元素定位。
给需要添加固定定位的元素，加上 position: fixed;
元素的位置通过（位置描述词）："left", "top", "right", "bottom"属性进行调整位置。属性值可以是正数，也可以是负数
固定定位除其位置是相对于浏览器窗口而言外，其它特性与绝对定位的一致

语法：

position: fixed; /* 固定定位 */
top: 100px; /* 与浏览器顶部距离 */
left: 100px; /* 与浏览器左边距离 */

1、元素相对视口（浏览器窗口）固定定位¶

<style>
body {
    height: 2000px;
}
.item {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 固定定位 */
    position: fixed;
    /* 与浏览器顶部100px */
    top: 100px;
    /* 与浏览器右边10px */
    right: 10px;
}
</style>

<body>
<div class="item"></div>
</body>

渲染效果： ![[Pasted image 20260228122006.png]]

2、元素相对祖先元素固定定位¶

TIP

当固定定位元素的祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，固定位位相对于该祖先元素定位。

.box {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  /* 以下四行代码，设置元素相对浏览器窗口（视口）水平垂直居中 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* 向左和向上移动自身（可视宽）一半 ，这里是100px*/
  /*
    margin-left: -100px;  向左移动100px 
    margin-top: -100px;  向上移动 100px 
    */
}
.box .close {
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  /* 推荐这种写法
    position: absolute;
    right: -15px;
    top: -15px; 
    */

  /* 这里的固定定位，是相对于 box 元素来定位的，因为 box 元素中用到了 transform 属性 */
  position: fixed;
  right: -15px;
  top: -15px;
}

<div class="box">
  <div class="close"></div>
</div>

![[Pasted image 20260228122136.png]]

五、粘性定位¶

粘性定位解读

粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素（当该祖先的 overflow是 hidden，scroll，auto，或 overlay时）定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

给需要添加粘性定位的元素，加上 position:sticky;
元素的位置通过（位置描述词）："left"，"top"，"right"，"bottom"属性进行调整位置。属性值可以是正数，也可以是负数

1、粘性定位元素，为 body 子元素¶

TIP

粘性定位相对离他最近的一个拥有“滚动机制”的祖先元素。body标签默认内容溢出就会出现滚动条，所以 body就是一个拥有“滚动机制”的祖先元素。

以下代码中的 .nav元素为 body标签的子元素
给 .nav元素设置为 sticky粘性定位
默认情况下，元素是按相对定位的状态显示（这种情况 top值不能大于元素与浏览器顶部距离）。当滚动浏览器滚动条时，如果滚动高度大于元素与页面顶部高度时，则元素以固定定位显示；如果滚动高度小于元素与页面顶部高度时，则恢复至相对定位状态。

<style>
  body {
    margin: 0;
    height: 3000px;
  }
  .top {
    height: 100px;
    background-color: #000;
  }
  .nav {
    height: 100px;
    background-color: rgb(136, 209, 238, 0.5);
  }
  .sticky {
    position: sticky; /* 粘性定位 */
    top: 0px; /* 与顶部距离是0 ,你可以修改这个值来查看状态 */
  }
  .main {
    width: 800px;
    height: 1500px;
    background-image: linear-gradient(pink, yellow);
    margin: 0 auto;
  }
</style>

<body>
  <div class="top"></div>
  <!-- 粘性定位元素 -->
  <div class="nav sticky"></div>
  <div class="main"></div>
</body>

渲染效果： ![[Pasted image 20260228122338.png]]

2、当 body 是离元素最近的拥有滚动机制的祖先元素¶

TIP

以下代码中的 .head 元素为sticky 粘性定位元素 body 是离.head元素最近的拥有“滚动机制”的祖先元素。默认情况下，元素相对定位来呈现。当滚动浏览器滚动条时如果滚动距离小于.head元素与页面顶部距离时，一直以相对定位状态来呈现如果滚动距离大于了.head元素与页面顶部距离时，元素固定定位在浏览器最顶部当滚动条滚动高度大于 .main底部与页面顶部距离时，.head相对.main元素一起被移走。注意：粘性定位元素的直接父元素的高度一定要大于粘性定位元素时，才能看到粘性定位效果。

代码演示一

body {
  margin: 0;
  height: 2000px;
}
.top {
  height: 100px;
  background-color: pink;
}
.main {
  width: 1000px;
  margin: 20px auto;
  /* 这里的高度一定要大于.head元素的高度，否则看不到粘性定位效果 */
  height: 700px;
  border: 5px solid red;
}
.head {
  height: 200px;
  background-color: rgb(240, 230, 140, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 200px;
  /* 粘性定位 */
  position: sticky;
  top: 0px;
}

<body>
  <div class="top"></div>
  <div class="main">
    <!-- 粘性定位的元素 -->
    <div class="head">粘性定位元素</div>
  </div>
</body>

渲染效果： ![[Pasted image 20260228122443.png]]

3、元素的父级（非 body)是离元素最近的拥有“滚动机制”祖先元素¶

TIP

.head 元素是粘性定位元素 .main 元素是离 .head元素最近的拥有”滚动机制“的祖先（父）元素当滚动.main 元素的滚动条时，当滚动距离大于 .head 元素顶部到 .main 元素顶部距离时，.head元素固定在.main元素的顶部。

body {
  margin: 0;
  height: 2000px;
}
.main {
  width: 500px;
  margin: 50px auto;
  height: 500px;
  overflow: auto;
  border: 1px solid red;
}
.h100 {
  height: 100px;
  background-color: skyblue;
}
.head {
  height: 200px;
  background-color: rgb(240, 230, 140, 0.5);
}
.sticky {
  /* 粘性定位 */
  position: sticky;
  top: 0px;
}
.h700 {
  height: 700px;
}

<div class="main">
  <div class="h100">1111</div>
  <div class="head sticky">粘性定位元素</div>
  <div class="h700">222</div>
</div>

渲染效果： ![[Pasted image 20260228122543.png]]

4、通过 bottom 调整粘性元素位置¶

TIP

当离自己最近的拥有滚动机制的祖先元素的滚动高度小于元素与浏览器顶部距离时，元素相对浏览器固定定位，否则跟随内容一起移走（相对定位效果）。

<style>
  body {
    margin: 0;
    height: 3000px;
  }
  .top {
    height: 100px;
    background-color: pink;
  }
  .box {
    height: 100px;
    background-color: skyblue;
    position: sticky; /* 粘性定位 */
    bottom: 0px; /* */
  }
  .h800 {
    height: 1800px;
    width: 500px;
    background-image: linear-gradient(to bottom, red, yellow);
    margin: 0 auto;
  }
</style>

<body>
  <div class="top"></div>
  <div class="h800"></div>
  <div class="box"></div>
</body>

![[Pasted image 20260228122623.png]]