CSS position深入关于我不知道的滚动定位
Posted GHUIJS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS position深入关于我不知道的滚动定位相关的知识，希望对你有一定的参考价值。
上周开发移动端，知道了，有滚动定位这个属性值。写了这么多年css居然是第一次知道有这个属性值。所以，我决定全面认识一下css position属性。
<template>
<div style="height: 10vh"></div>
<div class="target" :style="'position': po">
po
</div>
<div class="option">
<div v-for="(item,index) in ['relative','fixed','absolute','sticky']" :key="index" @click="chosePosition(item)">
item
</div>
</div>
<div style="height: 100vh"></div>
</template>
<script lang='ts' setup>
import ref from 'vue';
const po = ref<string>('static');
const chosePosition = (p:string) =>
po.value = p;
</script>
<style lang='less' scoped>
.target
width: 100px;
height: 100px;
background: red;
top: 0;
right: 0;
position: inherit;
//initial 开始值
//static 元素的默认值，即没有定位，遵循正常的文档流对象。
//relative 相对定位元素的定位是相对其正常位置。
//fixed 元素的位置相对于浏览器窗口是固定位置。
//absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
//sticky 基于用户的滚动位置来定位。
//inherit 继承父级属性
</style>看效果：
高性能云服务器
精品线路独享带宽，毫秒延迟，年中盛惠 1 折起
以上是关于CSS position深入关于我不知道的滚动定位的主要内容，如果未能解决你的问题，请参考以下文章
CSS position:fixed新版谷歌浏览器下（是新版哦），鼠标滚动会有抖动，不知道你们有没有遇到
JS简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示 - 替代CSS粘性定位position：sticky方案