使用位置固定时如何保持块级别？

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位置对应的是relative位置历史切换按钮，否则它们都与搜索出现容器的 fixed 位置相关。

Answer 1

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

Answer 2

经过自己的搜索和尝试，我想出了一个主意。如果你想在块级别上保持固定 div，正确的方法是将相同大小的父 div 包装在它上面。反映到我的情况，添加相同的宽度和高度包装器 div upper search-appbar-container

.search-appbar-container-wrapper {
  width: 100%;
  height: 48px;
}
.search-appbar-container {
  position: fixed;
  ...
  width: 100%;
  height: 48px;
}
...
<div class="search-appear-container-wrapper">
  <div class="search-appbar-container">
    ...
  </div>
</div>
...

使用位置固定时如何保持块级别？

How to keep block level when use position fixed?

css

css-position