如何在Vue中定位固定的子元素？

如何解决如何在Vue中定位固定的子元素？

我无法弄清楚为什么一个元素在 Vue 中不会相对于它的父元素保持固定。它仅与#app 相关。如何让子元素在 Vue 中成为其父元素的 100%，并且位置固定。

HTML：

 <div id="app">
   <div class="parent_relative">
     <div class="child_fixed"></div>
   </div>
 </div>

CSS：

.parent_relative{
    position: relative;
    width: 500px;
    height: 20px;
    border: 1px solid green;  
}
.child_fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: blue; 
}

下图是它的样子：

搜索栏周围有一个固定位置的 div。它不应该位于浏览器的顶部。它应该在您在其下方看到的深色 div 内。

解决方法

带有 position: fixed; 的元素相对于视口，而不是父元素。也许，您正在搜索的是相对于其父级的 position: absolute;。