How to align the close button of the pop-up window?

Navigation
0

I'm creating a pop-up window in CSS , but the close button is not within the element where the advertisement is displayed in the pop-up. The button is in the far left corner of the site.

Look below my popup, you're right. However, look at the upper left corner of the site (X) to close the pop-up advertisement.

How to make the close button stay in the upper right corner of the popup?

HTML

<figureclass="pop-up-principal">
    <span id="close">&times;</span>
    <img src="./imagens-pop-up/drbrunomachado.jpg">
</figure>

CSS 

figure.pop-up-principal img{
    position: fixed;
    width: 100%;
    max-width: 378px;
    max-height: 283px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 9999;
}

#close{
  position: fixed;
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: #EF5350;
  border:2px solid #EF9A9A;
}
    
asked by anonymous 24.07.2017 / 14:36

2 answers

1

Next, you have to get the position fixed, because it does not behave well based on containers, all the properties you put in the image should be applied in the container, because the image should only be resized based on it, with some adjustments, you can get the expected result ...

  

Edit: You wanted a responsive solution as well. follow the code

- 

figure.pop-up-principal {
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
figure.pop-up-principal img{
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
}
#close{
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: black;
  border:2px solid #EF9A9A;
  background-color: red;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-right: 5px;
  margin-top: 6px;
}
<figure class="pop-up-principal">
    <span id="close">&times;</span>
    <img src="https://cdn.pixabay.com/photo/2014/07/27/13/49/tree-402953__340.jpg">
</figure>
    
24.07.2017 / 14:53
0

figure.pop-up-principal img{
    position: fixed;
    width: 100%;
    max-width: 378px;
    max-height: 283px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 9999;
}

#close{
  position: absolute;
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: #EF5350;
  right: 0; 
  border:2px solid #EF9A9A;
    z-index: 9999999999;
}
<figure class="pop-up-principal">
    <span id="close">X</span>
    <img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg">
</figure>

Is this what you need?

    
24.07.2017 / 14:53
NullPointerException / Button findViewById Firebase user authentication