Html 试图理解'；位置'；和'；z指数。我的代码有问题吗

希望有人能帮我一把

我正在一个网站上工作，它需要一些中间有div的重叠图像，但我似乎无法正确地得到最后一点

目前我的页脚不在页面底部，而是粘在上一个div的顶部

<div id="hillparent">

  <img id="orangehill" class="img-fluid" src="https://i.imgur.com/hntjB3B.png?1">

  <div id="lowerthird">
    <img id="lightbulb" class="img-fluid" src="/img/home/lightbulb.png">

  </div>

  <img id="pinkhill" class="img-fluid" src="https://i.imgur.com/ayGKiwy.png?1">

</div>





<footer>

  <div class="row text-center footerbutton">
    <button type="button" class="btn btn-secondary"><a href="#">Contact
        Us</a></button>
    <a href="#" class="btn-floating btn-lg btn-fb" role="button"><i
          class="fab fa-facebook-square"></i></a>
    <a href="#" class="btn-floating btn-lg btn-ins" role="button"><i
          class="fab fa-instagram-square"></i></a>
  </div>

</footer>

这是密码笔：

我试着让山丘在经过大量的试验和错误之后，在中间坐着的DIV，我将把内容放进去。以下是我希望它看起来像什么的屏幕截图：

有人知道我哪里出了问题吗。这是我第一次处理z索引和定位

---

谢谢

您是否尝试过

页脚{位置：固定；底部：0；}

？您的灯泡图像有一个相对路径，因此它不会显示在codepen中。是的，这只是将页脚固定在视口的底部，而不是整个页面的底部。您将

#hillparent

的所有子对象绝对定位。这会将它们从DOM结构中删除，因此除非设置固定的高度，否则

#hillparent

将没有高度。绝对定位元素的父元素不能具有子元素的高度。关于这一点有很多讨论。因此，您将无法将页脚“自然”（相对）定位到

绝对内容的底部，因为DOM中的下一个相对位置仍然是页面的顶部。您需要在
#hillparent
上设置固定高度，或者对固定到视口的页脚感到满意您是否尝试过
页脚{位置：固定；底部：0；}
？您的灯泡图像有一个相对路径，因此它不会显示在codepen中。是的，这只是将页脚固定在视口的底部，而不是整个页面的底部。您将
#hillparent
的所有子对象绝对定位。这会将它们从DOM结构中删除，因此除非设置固定的高度，否则
#hillparent
将没有高度。绝对定位元素的父元素不能具有子元素的高度。关于这一点有很多讨论。因此，您将无法将页脚“自然”（相对）定位到
绝对内容的底部，因为DOM中的下一个相对位置仍然是页面的顶部。您需要在
#hillparent
上设置一个固定高度，或者对固定到视口的页脚感到满意
#lowerthird {
 background-color: #2e3f53;
}

#hillparent {
  position: relative;
}

#orangehill {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#lowerthird {
  background-color: #2e3f53;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 300px;
}

#pinkhill {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

footer {
  width: 100%;
  background-color: #000;
  position: relative;
  z-index: 3;
}