当使用position: fixed
时,浏览器会移除布局的原始位置。如何预防?
在我的例子中,搜索应用栏的实际固定位置充当
期望充当。
模拟css代码。
.search-appbar-container {
position: fixed;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 48px;
}
.lef-arrow-icon-container`
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 60px;
`;
.search-textfiled-container`
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
`;
.add-icon-container`
display: flex;
flex-direction: row;
align-items: center;
`;
.search-history-container {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 5px;
}
.history-toggle-button`
position: relative;
width: 100%;
height: 48px;
background-color: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
`;
.history-icon-container`
position: absolute;
top: 11.5px;
left: 0;
width: 60px;
`;
.history-text-container`
position: absolute;
top: 11.5px;
left: 60px;
display: flex;
flex-direction: row;
align-items: center;
`;
模拟html代码。
<div>
<div class="search-appbar-container">
<div class="left-arrow-container>
...
</div>
<div class="search-textfield-container>
...
</div>
<div class="add-icon-container>
...
</div>
</div>
<div class="search-history-div">
<button class="history-toggle-button">
<div class="history-icon-container>
...
</div>
<div class="history-text-container>
...
</div>
</button>
</div>
</div>
编辑
检查我所有的代码,现在我可以找到发生这种情况的原因了。
如果.search-appbar-container的位置是static
,history-icon-container和history-text-container的absolute
位置与相关>history-toggle-button 的相对
位置,否则它们都是search-appear-container 的相关fixed
位置。
最佳答案
您可以将 margin-top 或 padding-top 设置为 .search-history-div 或设置 .search-history-div{position: fixed;top: 48px}
关于css - 使用位置固定时如何保持 block 级别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51699690/