Каким образом сделать такой эффект футера?

Question

подскажите пожалуйста, как добиться такого эффекта появления футера? https://imgur.com/pSV08z8

Answer 1

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

footer{
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 0;
}

Answer 2

Смотреть на весь экран

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  height: 970px;
}

main{
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: lightgreen;
  text-align: center;
  padding: 30px 0;
}

footer{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200px;
  background: lightblue;
  padding: 20px;
}

<main>
  <img src="http://placehold.it/300x200" alt="">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur vel quaerat minima ut soluta ex earum ullam ipsa maxime at?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur vel quaerat minima ut soluta ex earum ullam ipsa maxime at?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur vel quaerat minima ut soluta ex earum ullam ipsa maxime at?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur vel quaerat minima ut soluta ex earum ullam ipsa maxime at?</p>
</main>
<footer>
  Это фуутер но он фиксированный и имеет z-index меньше чем main
</footer>

БЛОГ НА HUSL

Каким образом сделать такой эффект футера?

Ответы (2 шт):