在屏幕底部相对于其图像的位置按钮

Question

我正在努力想明白为什么我不能把按钮相对于它的图像定位，而是放在屏幕的底部。我试着阅读了其他的问题，但是从前面的回答中想不出一个解决方案。也许我的情况不一样？

本质上，我试图将按钮定位在图像下方，同时保持它（按钮）居中，并保持它的响应性。我是一个长期的读者第一次问问题。如能提供任何有助于解决问题的投入，将不胜感激。

也许我的divs不在了？

null

.randomImage {
  position: fixed;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  height: auto;
  width: auto;
  top: 20%;
}
.btnGroup {
  margin: 0 auto;
  width: 20px;
  color: red;
  position: relative;
}
#buttonOne {
  position: absolute;
}

<div class="blackOverLay">

  <div class="imageContainer">
    <div class="imageHold">
      <image class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA">
        </img>
        <div class="btnGroup">
          <button id="buttonOne" onclick="closeThis()">CLOSE</button>
        </div>
    </div>
  </div>
</div>

null

Answer 1

如果我理解你，这就是你想要的。

null

.randomImage {
position: absolute;

right: 0;
left: 0;
margin-right: auto;
margin-left: auto;

height: auto;
width: auto;
}

.btnGroup {
margin: 0 auto;
width: 20px;
color: red;
}

.imageContainer {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#buttonOne {
 position: absolute;
 bottom: 0
 }

<div class="blackOverLay">
    <div class="imageContainer">
        <div class="imageHold">
            <img class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA" />
            <div class="btnGroup">
                <button id="buttonOne" onclick="closeThis()">CLOSE</button>
            </div>
        </div>
    </div>
</div>