css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位

一、默认属性static

当一个元素具有static定位时，它将按照文档的正常流程进行渲染。这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。
以下是关于position: static;属性的几个关键点：
1、具有position: static;的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
2、默认情况下，块级元素占据其父容器的整个宽度，并垂直堆叠。
3、另一方面，内联元素则不会创建换行符，并与其他元素在同一行内显示。
4、具有position: static;的元素不受z-index属性影响。它们的堆叠顺序由它们在文档树中的位置决定，并且无法改变。

二、相对定位relative

相对定位，元素的位置相对于它在文档中的正常位置进行调整。可以使用top、bottom、left、right属性来指定定位的偏移量。
1、具有position: relative;的元素仍然遵循文档流，并且不会脱离文档流。相对定位的元素仍然占据其原始位置，其他元素的布局不会受到影响。
2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。这些偏移量是相对于元素自身进行计算的。
3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。其他元素的定位不会受到影响，它们仍会按照正常流程进行显示。

与position:absolute配合使用

三、绝对定位absolute

绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。可以使用top、bottom、left、right属性来指定定位的偏移量。

<template>
  <div class="content">
    <div class="content-box1">normal</div>
    <div class="content-box2">absolute</div>
  </div>
</template>

<script lang="ts" setup>
</script>
<style scoped lang="less">
.content{
  background: #99FFCC;
  width: 100vw;
  height: 100vh;
  position: relative;
  &-box1{
    width: 100px;
    height: 100px;
    background: #99FF66;
  }
  &-box2{
    width: 100px;
    height: 100px;
    background: #99CCFF;
    position: absolute;
    top: 200px;
    left: 200px;
  }
}
</style>

四、固定定位fixed

固定定位，元素的位置相对于浏览器窗口进行定位，不会随页面滚动而改变。可以使用top、bottom、left、right属性来指定定位的偏移量。

<template>
  <div class="content">
    <div class="content-box1">normal</div>
    <div class="content-box2">fixed</div>
  </div>
</template>

<script lang="ts" setup>
</script>
<style scoped lang="less">
.content{
  background: #99FFCC;
  width: 100vw;
  height: 100vh;
  position: relative;
  &-box1{
    width: 100px;
    height: 100px;
    background: #99FF66;
  }
  &-box2{
    width: 100px;
    height: 100px;
    background: #99CCFF;
    position: fixed;
    top: 200px;
    left: 200px;
  }
}
</style>

五、粘性定位sticky

粘性定位，元素的定位根据滚动位置来改变。当元素滚动到指定位置时，元素将固定在屏幕上，否则会按照正常文档流进行布局。

<template>
  <div class="content">
    <div class="content-box1">normal</div>
    <div class="content-box2">sticky</div>
  </div>
</template>

<script lang="ts" setup>
</script>
<style scoped lang="less">
.content{
  background: #99FFCC;
  width: 100vw;
  height: 1000px;
  &-box1{
    width: 100px;
    height: 100px;
    background: #99FF66;
  }
  &-box2{
    width: 100px;
    height: 100px;
    background: #99CCFF;
    position: sticky;
    top: 50px;
    left: 200px;
  }
}
</style>

过程记录

position: relative; 可以在 position fixed 上边

相当于添加了背景

参考链接

position定位的属性_position: static 属性可防止 left 产生影响。 不妨尝试将 position 设-CSDN博客

黏性定位【渡一教育】_哔哩哔哩_bilibili