Position Knopf auf der Unterseite des Bildschirms relativ zu seinem Bild

Question

Ich reiße meine Haare aus versuchen zu verstehen, warum ich nicht scheinen kann, meine Taste relativ zu seinem Bild, sondern auf dem unteren Teil des Bildschirms zu positionieren. Ich habe versucht, die anderen Fragen zu lesen, konnte mir jedoch keine Lösung aus den vorherigen Antworten vorstellen. Vielleicht ist meine Situation anders?

Im Wesentlichen versuche ich, den Knopf unter dem Bild zu positionieren, während ich es (Knopf) zentriert halte und es reaktionsbereit halte. Ich bin ein erster Leser der ersten Zeit Frage-Fragesteller. Jede Eingabe, die zu Lösungen führt, wird sehr geschätzt.

Vielleicht sind meine divs aus?

.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

Wenn ich Sie verstehen, ist, dass u wollen.

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