Question

为清晰起见编辑：

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

图像的顶部和左侧值应决定它们相对于容器的位置。这允许它们相互重叠。

该容器应放在#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/

Answer 1

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我真的很困惑你的标记。但是如果你要求明确地组成image_container的高度跨越图像的高度，那么你需要将#left的高度设置为100％，将image_container的高度设置为100％。

更新：我根据您更新的答案更新了我的小提琴。 #image_container需要是相对的，图像必须是绝对的。 在全屏幕上运行以查看图像如何被推到图像容器的底部。

Answer 2

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

Answer 3

目前还不是很清楚你想要什么，但生病了。 https://jsfiddle.net/Le9rats3/3/

您的问题是position:relative仅适用于定位为：fixed，absolute或relative的其他元素。

此外，position: relative将其定位于“自然”排列的位置。在这种情况下，您可能希望使用absolute。

请参阅小提琴代码。

Answer 4

元素位于其父容器中，但您无法定位#image_container，因为它的父级#left没有设置任何高度或宽度，也没有它自己的{{1}设置，所以它不知道去哪里。

在底部放置重叠图像的div

4 个答案: