问题描述
我无法弄清楚为什么一个元素在 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;
。