将元素放在另一个未知高度和位置的元素上方：固定

Question

我有以下元素：

<div class="bottom-est">Bottom-Est</div>

.bottom-est {
  position: fixed;
  width:100%;
  bottom: 0;
  border: 1px solid black;
  background-color: orange;
}

我可以在它上面放置另一个固定位置元素吗？

如果它具有固定/已知高度，我只需添加bottom:##px即可取代它：

<div class="bottom-ish">Bottom-Ish</div>

.bottom-ish {
  position: fixed;
  width:100%;
  bottom: 18px;
  border: 1px solid black;
  background-color: yellow;
}

这将实现最终目标：

但有没有办法做到这一点，不需要提前知道高度。我根本无法修改.bottom-est，但我可以根据需要修改.bottom-ish。

body {
  margin:0;
  padding:0;
}

.bottom-ish {
  position: fixed;
  width:100%;
  bottom: 18px;
  border: 1px solid black;
  background-color: yellow;
}
.bottom-est {
  position: fixed;
  width:100%;
  bottom: 0;
  border: 1px solid black;
  background-color: orange;
}

<div class="bottom-ish">Bottom-Ish</div>
<div class="bottom-est">Bottom-Est</div>

Answer 1

仅使用CSS，答案是否定的。

将position: fixed应用于元素后，将其从文档流中删除。这意味着其他元素不尊重固定元素的空间。事实上，他们将固定元素视为甚至不存在。

因此，除非您知道固定元素的高度，否则您无法将另一个元素放置在其正上方。

Answer 2

@Michael_B's回答的补充

为避免脚本，有两种方法，共享父

＆＃13;

＆＃13;

body {
  margin:0;
  padding:0;
}

.bottom {
  position: fixed;
  width:100%;
  bottom: 0;
  background-color: orange;
}

.bottom-ish {
  border: 1px solid black;
  background-color: yellow;
}
.bottom-est {
  border: 1px solid black;
  background-color: orange;
}

＆＃13;

<div class="bottom">
  <div class="bottom-ish">Bottom-Ish</div>
  <div class="bottom-est">Bottom-Est</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或嵌套

＆＃13;

＆＃13;

body {
  margin:0;
  padding:0;
}

.bottom-ish {
  position: absolute;
  left: -1px;
  width:calc(100% + 2px);
  bottom: calc(100% + 1px);
  border: 1px solid black;
  background-color: yellow;
  box-sizing: border-box;
}
.bottom-est {
  position: fixed;
  width:100%;
  bottom: 0;
  border: 1px solid black;
  background-color: orange;
  box-sizing: border-box;
}

＆＃13;

<div class="bottom-est">
  <div class="bottom-ish">Bottom-Ish</div>
  Bottom-Est
</div

＆＃13;

＆＃13;

＆＃13;