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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: