粘性不适用于页脚和封面主体元素[重复]

Posted 2023-03-05

【中文标题】粘性不适用于页脚和封面主体元素[重复]

【英文标题】：sticky is not working on footer and cover body element [duplicate]

【发布时间】：2022-01-23 01:54:09

【问题描述】：

如果我将页脚 z-index 更改为 -1，它可以正常工作，但如果有任何链接或按钮无法点击，则会出现问题。

我该如何解决这个问题？

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;

html 
  height: 100%;

section 
  width: 100%;

.item 
  width: 100%;
  height: 100vh;
  background: red;

.item1 
  background: yellow;

footer 
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;

.container 
  min-height: 100vh;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

<section>
  <div class="item item1"></div>
  <div class="item item2"></div>
</section>

<footer>
  <div class="container">
    <div class="content">
      <h1>Hellow</h1>
    </div>
  </div>
</footer>

【参考方案1】：

您需要定位您的部分，使其也位于“游戏”层中。这只是一个错误

section
  position:relative;
  z-index:1;