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

Question

我无法弄清楚为什么一个元素不会相对于它在 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 内。

Answer 1

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