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

Question

我正在努力理解为什么我似乎无法将按钮相对于其图像定位但位于屏幕底部。我已尝试阅读其他问题，但无法从之前的回复中找到解决方案。也许我的情况不同？

基本上，我试图将按钮放置在图像下方，同时保持它（按钮）居中并保持响应。我是第一次提问的长期读者。任何导致解决方案的输入将不胜感激。

也许我的 div 已关闭？

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

Answer 1

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

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