CODEWITHSUNDEEP
htmlcss
user6688829
user6688829

Reputation:

Placing close button in top rigth corner of an image with different sizes

I have a <div> which includes two <img>, one is the close button, the other one is a roommap. However, the roommap size is always different, so putting the close button in an absolute position doesnt seem to work.

Does anybody has an idea how I could achieve that the close button is based on the roommap size and always in top right corner? Also, the whole <div> is a popup which is centered in the middle of the screen.

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

Upvotes: 0

Views: 591

Answers (3)

kizoso
kizoso

Reputation: 1246

Now you use block wrapper, it has width 100%. Use inline-block wrapper for your image. And don't use position absolute for main image, it doesn't make width for parent 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>

Upvotes: 0

Pete
Pete

Reputation: 58462

Ok, your issue is you need a div to just hold the image and be the same size so you can position your cross relative to the image size.

Try the following (I have added an extra image-holder div but if you don't want this, just make your main cont2 div inline-block):

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

Upvotes: 3

Zze
Zze

Reputation: 18835

I had to refactor your css a little but here is a working version:

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

The main changes are that the #popImg is now the element that is being offset to the centre. This was the main cause of your problems before, because the #closebutton had no relationship with the #roomchoose.

Upvotes: 1

Related Questions