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

Question

我急不可耐地试图理解为什么我似乎无法将我的按钮相对于它的图像放置在屏幕的底部。我曾尝试阅读其他问题，但无法从之前的回复中找到解决方案。可能我的情况不一样？

本质上，我试图将按钮定位在图像下方，同时保持它（按钮）居中并保持响应。我很长一段时间 reader 第一次提问。任何导致解决方案的输入将不胜感激。

也许我的 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>

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

Position button on bottom of screen relative to its image

html

css

position

button