一、默认属性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
