css - 使用位置固定时如何保持 block 级别？

Question

当使用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 位置。

Answer 1

您可以将 margin-top 或 padding-top 设置为 .search-history-div 或设置 .search-history-div{position: fixed;top: 48px}