将元素放置在元素内部，使其位置在其他粘性元素之上

Question

在下面的示例中：

req.body.bookTitle

.item {
  width: 100%;
}

.item-header {
  display: flex;
  flex-direction: column;
  background-color: red;
  position: sticky;
  z-index: 10;
  top: 0;
}

.title {
  order: 2;
}

.item-header-right {
  order: 1;
  margin-left: auto;
}

.item-header-right-placeholder {
  width: 100%;
  height: 18px;
  background-color: red;
}

我想做到这一点，因此右上方的“ hello”在遍历其他粘性元素时始终位于上方。这可能吗？

这里是jsfiddle，如果在这里更容易编辑：

https://jsfiddle.net/azyfcn7m/

Answer 1

取决于您的其余结构，但这是实现它的一种方法。您制作了position: fixed;

项

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.item {
  width: 100%;
}

.item-header {
  display: flex;
  flex-direction: column;
  background-color: red;
  position: sticky;
  z-index: 1;
  top: 0;
}

.title {
  order: 2;
}

.item-header-right {
  order: 1;
  margin-left: auto;
}

.item-header-right-placeholder {
  width: 100%;
  height: 18px;
  background-color: red;
}

.fixed-item {
  position: fixed;
  top: 0;
  right: 0;
  padding: .25rem;
  background-color: deepskyblue;
  z-index: 2;
}

<div class="fixed-item">hello</div>

<div class="item">
  <div class="item-header">
    <div class="title">hello</div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="item">
  <div class="item-header">
    <div class="title">hello</div>
    <div class="item-header-right-placeholder"></div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="item">
  <div class="item-header">
    <div class="title">hello</div>
    <div class="item-header-right-placeholder"></div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="item">
  <div class="item-header">
    <div class="title">hello</div>
    <div class="item-header-right-placeholder"></div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div class="item">
  <div class="item-header">
    <div class="title">hello</div>
    <div class="item-header-right-placeholder"></div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
</div>