将具有重叠图像的 div 放在底部答案

【问题标题】：Place div with overlapping images at the bottom将具有重叠图像的 div 放在底部
【发布时间】：2017-03-06 21:18:30
【问题描述】：

为清晰起见进行了编辑：

我有一些图像应该相互重叠并放置在固定 div #all 的底部。

图像的 top 和 left 值应指示它们相对于容器的位置。这允许它们相互重叠。

该容器应放在#all 的底部。

问题是 image_container div 没有到达底部。

HTML：

<div id="all">
  <div id="left">
    <div>Some Text</div>
    <div id=image_container>
      <img style="left: 50px; top: 50px" src="https://thumb1.shutterstock.com/thumb_large/1148591/116239540/stock-vector-orange-icon-116239540.jpg">
      <img style="left: 20px; top: 100px" src="https://thumb10.shutterstock.com/thumb_large/713587/111988943/stock-vector-icon-orange-111988943.jpg">
    </div>
  </div>
 </div>

CSS：

#all{
  width: 500px;
  height: 350px;
}
#left{
  float: left;
}
#left > div{
  display: block;
}
#image_container{
  position: relative;
  bottom: 0px;
}
#image_container > img{
  position: absolute;
}

jsfiddle：https://jsfiddle.net/Le9rats3/

【问题讨论】：

标签： html css

【解决方案1】：

#all {
  width: 100%;
  height: 100vh; /* for demo purposes */
}
#left {
  height: 100%;
}

#image_container {
  position: relative;
  
  width: 100%;
  height: 100%;
}

#image_container img {
  position: absolute;
  left: 50px;
  bottom: 50px;
}

#image_container img:nth-child(2) {
  left: 0;
  bottom: 0;
}

<div id="all">
  <div id="left">
    <div>Some Text</div>
    <div id=image_container>
      <img style="" src="https://thumb1.shutterstock.com/thumb_large/1148591/116239540/stock-vector-orange-icon-116239540.jpg">
      <img style="" src="https://thumb10.shutterstock.com/thumb_large/713587/111988943/stock-vector-icon-orange-111988943.jpg">
    </div>
  </div>
 </div>

我真的对你的标记感到困惑。但是，如果您要求明确弥补 image_container 的高度跨越图像的高度，那么您需要将 #left 的高度设置为 100%，并将 image_container 的高度设置为 100%。

更新：我根据您更新的答案更新了我的小提琴。 #image_container 需要是相对的，并且图像需要是绝对的。 全屏运行，看看图片是如何推送到图片容器底部的。

【讨论】：

【解决方案2】：

您不应使用position: relative。如果要相对于页面定位，请使用position: absolute。如果您想相对于视口定位，请使用position: fixed。

【讨论】：

【解决方案3】：

这里不是很清楚你想要什么，但我想试一试。 https://jsfiddle.net/Le9rats3/3/

您的问题是position:relative 仅适用于定位为fixed、absolute 或relative 的另一个元素。

此外，position: relative 相对于它“自然”排列的位置定位它。在这种情况下，您需要使用absolute。

代码见 fiddle。

【讨论】：

我已编辑问题以提高清晰度。此解决方案的工作原理是将容器放置在页面底部，但图像不再根据其顶部和左侧值放置。它们应该根据这些值相对于它们的容器放置。本质上，left 和 top 值应该是相对于父容器的偏移量。
您能否提供一个示例，说明您的意思是通过已经在线构建的东西，或者只是通过在 Google Draw 中制作快速图像或其他东西？

【解决方案4】：

元素被定位到它们的父容器，但你不能定位#image_container，因为它是父容器#left，没有设置任何高度或宽度，也没有设置它自己的position，所以它不知道去哪里。

【讨论】：