position:fixed无法固定到父盒子上面的解决方案

目录

问题如图所示：

下面是错误的代码：

解决方案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>

最后，希望大家多看文档哈，也希望适当的学习新知识，能够相较于昨天有一点点的进步！