Question

我正在尝试堆叠两个元素以同时显示在屏幕上。

元素A和元素B具有相同的z-index: 2000以及相同的top:0和position:fixed。

当它在浏览器中呈现时，我只能看到element A。 element B隐藏在元素A的后面，因为它们具有相同的CSS样式。

我想要的是使它们都一个接一个地堆叠。在浏览器上，我应该在元素顶部看到元素A，在元素A之后看到元素B。

这是样式

position: 'fixed', top:0, width: '100%', 'z-index': '2000'

Answer 1

固定的位置是相对于视口的。您应该设置element a的高度和element b top: {element a height}。

.a {
  position: fixed;
  top:0;
  width: 100%;
  height: 10px;
  z-index: 2000;
  background: violet;
}

.b {
  position: fixed;
  top: 100px;
  width: 100%;
  height: 10px;
  background: purple;
}

    <div class="a">
    <div class="b">

但实际上听起来sticky位置会更合适：

.wrapper {
  position: sticky;
  top: 0;

}

.c {
  width: 100%;
  background: blue;
  min-height: 10px;
}

.d {
  background: yellow;
  min-height: 10px;
  width: 100%;
}

.e {
  height: 10000px;
  background: red;
}

<div class="wrapper">
  <div class="c"></div>
  <div class="d"></div>
</div>
<div class="e"></div>

彼此堆叠相同的z-index和相同的top：0位置

1 个答案: