sticky is not working on footer and cover body element-CodePudding

If i change footers z-index to -1 its works fine but the problem if there is any link or button can't clickable. if there is any other solution. and how to fix with pure CSS.

* {
  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 ></div>
  <div ></div>
</section>

<footer>
  <div >
    <div >
      <h1>Hellow</h1>
    </div>
  </div>
</footer>

How i fix this

CodePudding user response：

You need to position your section so it is in the layer 'game' too. It is just a bug

section{
  position:relative;
  z-index:1;
 }

CodePudding user response：

delete .container { min-height: 100vh;} then sticky footer works now