Platzieren schließen Knopf in der oberen rechten Ecke eines Bildes mit verschiedenen Größen

Question

Ich habe eine <div>, die zwei enthält, ist eine der Schließen-Taste, die andere ist eine Raumkarte. Die Größe der Raumkarte ist jedoch immer unterschiedlich. Daher scheint es nicht zu funktionieren, die Schließen-Schaltfläche in eine absolute Position zu setzen.

Hat jemand eine Idee, wie ich erreichen konnte, dass die Schließen-Schaltfläche auf der Raumkartengröße und immer in der oberen rechten Ecke basiert? Auch das ganze <div> ist ein Popup, das in der Mitte des Bildschirms zentriert ist.

.cont2 { 
 
    position: relative; 
 
} 
 
.cont2 .img2 { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    right: 10%; 
 
    z-index: 2; 
 
} 
 
.cont2 .img1 { 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    left: 50%; 
 
    z-index: 1; 
 
    border: 4px solid black; 
 
    border-radius: 5px; 
 
    -webkit-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -transform: translateX(-50%); 
 
}

<div class="cont2" id="popImg"> 
 
    <img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button"> 
 
    <img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" /> 
 
</div>

Answer 1

Ok, Ihr Problem ist, dass Sie ein Div brauchen, um nur das Bild zu halten und die gleiche Größe haben, so dass Sie Ihr Kreuz relativ zur Bildgröße positionieren können.

Versuchen Sie, die folgenden (ich habe ein zusätzliches Bildhalter div hinzugefügt, aber wenn Sie das nicht wollen, nur Ihre Haupt cont2 div inline-block machen):

.cont2 { 
 
    position: relative; 
 
} 
 
.cont2 .img2 { 
 
    position: absolute; 
 
    top: 10%; 
 
    right: 10%; 
 
    z-index: 2; 
 
    border:1px solid red; 
 
} 
 
.cont2 .image-holder { 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top: 15%; 
 
    left: 50%; 
 
    border: 4px solid black; 
 
    border-radius: 5px; 
 
    transform: translateX(-50%); 
 
} 
 
.cont2 .image-holder img { 
 
    display: block 
 
}

<div class="cont2" id="popImg"> 
 
    <div class="image-holder"> 
 
    <img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button"> 
 
    <img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" /> 
 
    </div> 
 
</div>

Answer 2

hatte ich Ihre CSS ein wenig Refactoring aber hier ist eine Arbeitsversion:

#popImg { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
img { 
 
    position: absolute; 
 
} 
 
#closebutton { 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
#roomchoose { 
 
    width: 100%; 
 
    height: auto; 
 
    z-index: 1; 
 
}

<div class="cont2" id="popImg"> 
 
    <img class="img2" id="closebutton" src="http://placehold.it/50x40/ff0000/ffffff"> 
 
    <img class="img1" onclick="point_it(event)" id="roomchoose" src="http://placehold.it/500x400" /> 
 
</div>

Die wichtigsten Änderungen sind, dass die #popImg jetzt das Element, das zur Mitte versetzt wird. Dies war die Hauptursache für Ihre Probleme zuvor, denn die hatte keine Beziehung mit der #roomchoose.

Answer 3

Jetzt verwenden Sie Block Wrapper, es hat eine Breite von 100%. Verwenden Sie den Inline-Block-Wrapper für Ihr Bild. Und verwenden Sie keine Position absolut für Hauptbild, es nicht machen Breite für Eltern div:

.cont2 { 
 
    position: relative; 
 
    text-align:center; 
 
} 
 
.cont2 .img2 { 
 
    position: absolute; 
 
    margin-top: 10%; 
 
    right: 10%; 
 
    z-index: 2; 
 
} 
 
.cont2 .img1 { 
 
    position: relative; 
 
    margin-top: 15%; 
 
    z-index: 1; 
 
    border: 4px solid black; 
 
    border-radius: 5px; 
 
} 
 
.wrapper{ 
 
    display:inline-block; 
 
    position:relative; 
 
}

<div class="cont2" id="popImg"> 
 
    <span class="wrapper"> 
 
    <img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button"> 
 
    <img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" /> 
 
    </span> 
 
</div>