目录
问题如图所示：
下面是错误的代码：
解决方案1：
使用fixed固定定位固定到父元素：
解决方案2：
推荐使用的其他方案（粘性定位）：
什么是粘性定位：
粘性定位的使用：
这是我在项目中使用粘性定位的实现效果：
实例代码及解释如下：
问题如图所示：
下面是错误的代码：
从代码中我们可以看到子盒子使用了固定定位fixed，并且设置了left和top的偏移；父盒子使用了position: relative相对定位；
<div style="position: relative;height: 0px;">
<div style="display: flex;margin:10px 0 ;background-color: #fff;position:fixed;left: 31%;top: -10px;">
<el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button>
<el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button>
<div v-for="(item, index) in caseColorList" :key="index" class="color_d">
<div class="col_black"
:style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`">
</div>
<span>{{ item.label }}</span>
</div>
</div>
</div>根据这样的写法，我们可以判断出，子盒子应该根据已经设置的相对定位的最近的父盒子进行定位，但是子盒子的位置却在窗口的顶部了，其实这样的写法是错误的
子盒子（内部div）使用position: fixed;导致它相对于浏览器窗口定位，而不是相对于父盒子定位。这是因为position: fixed;的工作原理就是相对于浏览器窗口（viewport）进行定位，无论滚动页面多少，它都会保持在相同的位置。
而position: relative 对子元素的position: fixed;定位没有任何影响，因为relative和fixed是两种完全不同的定位方式。position: relative;仅用于为子元素设置绝对定位（position: absolute;）时提供一个相对于其正常位置的偏移参考点。
解决方案1：
所以我们只要把定位改成绝对定位就可以啦
<div style="position: relative;height: 0;">
<div style="display: flex;margin:10px 0 ;background-color: #fff;position:absolute;left: 31%;top: -10px;">
<el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button>
<el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button>
<div v-for="(item, index) in caseColorList" :key="index" class="color_d">
<div class="col_black"
:style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`">
</div>
<span>{{ item.label }}</span>
</div>
</div>
</div>解决效果如图：
上面这确实是一个解决方案，但是假如吧，我只想用这个固定定位来实现呢？
因为固定定位是相对于浏览器窗口进行定位的，那我需要怎么样才能解决呢？怎样作用于父盒子上呢？
使用fixed固定定位固定到父元素：
在此之前呢,我们先看看文档，看他们是怎么对这些进行定义的：
下面是文档中关于常用的几种定位的描述：
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效。relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform、perspective、filter或backdrop-filter属性非none时，容器由视口改为该祖先。
当你看到这个的时候你应该就知道怎么解决了吧，所以说多看文档，前端的东西很多，而且是与时俱进的，文档啥的一直在更新变更，或许哪一天你常用的属性就被移除废弃了。
其中文档中讲述了：当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
毛主席曾言：实践是检验真理的唯一标准，那我们就来实践一下吧。
解决方案2：
我们去掉了父盒子的相对定位，但是加上了transform进行了1:1的缩放，为1是不改变原来盒子的大小，其实也可以使用transform:rotate(360deg);进行旋转回归原位也是可以的哦
<div style="height: 0;transform:scale(1)">
<div style="display: flex;margin:10px 0 ;background-color: #fff;position:fixed;left: 31%;top: -10px;">
<el-button size="small" class="blue white_f" @click="saveRightData">保存</el-button>
<el-button size="small" class="blue white_f" style="margin-right:40px ;" @click="moveType=!moveType">{{!moveType?'开启':'关闭'}}滑动选中</el-button>
<div v-for="(item, index) in caseColorList" :key="index" class="color_d">
<div class="col_black"
:style="`background-color:${item.val};border: 1px solid ${item.boder_val || 'none'};`">
</div>
<span>{{ item.label }}</span>
</div>
</div>
</div>下面是效果，和使用了绝对定位效果是一样的：
推荐使用的其他方案（粘性定位）：
如果你想定位到父盒子身上，并且能够实现固定定位的效果，我更推荐用下面这个（粘性定位），可能比较用的少吧，但是用起来真的很方便。
什么是粘性定位：
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
简单来讲的话就是：
- 一个元素在滚动到某个位置之前为相对定位，然后当它达到指定的偏移位置时，它会“粘”在那里（就像固定定位一样，通常是视口的顶部或底部），直到滚动出视口。
- 需要注意的是，为了使粘性定位生效，元素必须有一个
top、right、bottom或left属性的非auto值。
sticky
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于
top、right、bottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hidden、scroll、auto或overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）
粘性定位的使用：
这是我在项目中使用粘性定位的实现效果：
直接附上
实例代码及解释如下：
该代码只体现了主要部分，其中的h2标签就是需要进行粘性的部分（就是给需要粘性定位的盒子加上这个就行了），实现的效果上面已经有了哦，就不多说了。
在 viewport 视口滚动到元素 top 距离小于 n px 之前，元素为相对定位。之后，元素将固定在与顶部距离 n px 的位置，直到 viewport 视口回滚到阈值以下。当元素“粘”在视口顶部时，这个top值决定了元素与视口顶部的距离。
-webkit-sticky解释：这是一个WebKit特有的（也就是Safari和早期版本的Chrome等浏览器使用的渲染引擎）属性；主要用于确保样式在这些浏览器上正常工作。但是，现代浏览器大多已经支持标准的sticky属性，因此-webkit-sticky主要用于向后兼容。
<div id="divWidth" v-for="(item,index) in rightData" :key="index">
<h2 style=" position: -webkit-sticky; position: sticky;top: -1px;background-color: #fff;">{{ item.wareName }}</h2>
<div style="margin: 10px 0;" v-for="(v,i) in item.wareLocatorRowList" :key="i">
//自己的内容
</div>
</div>最后，希望大家多看文档哈，也希望适当的学习新知识，能够相较于昨天有一点点的进步！
