title: Position of close button on CSS pop up
body: <p>I have a thumbnail image you can click to open a full size image as a pop up div. </p>
  
  <p>I want the close button for that pop up to be in the top right corner on the border but not on the image itself. I've attached a screenshot example from another site of what I am trying to do, as well as an example of what mine looks like.</p>
  
  <p>What I want:</p>
  
  <p><img src="https://i.stack.imgur.com/SuoXo.jpg" alt="enter image description here"></p>
  
  <p>What I have:</p>
  
  <p><img src="https://i.stack.imgur.com/IWTj5.jpg" alt="enter image description here"></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="blanket" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="popUpDiv" style="display:none;"&gt;
          &lt;a href="#" onclick="popup('popUpDiv')"&gt;&lt;img src="images/close.png" align=right&gt;&lt;/a&gt;&lt;img src="images/largeimg.jpg" width=551 height=750&gt;
      &lt;/div&gt;  
    &lt;h1&gt;&lt;a href="#" onclick="popup('popUpDiv')"&gt;Click Here To Open The Pop Up&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#blanket {
     background-color:#111;
     opacity: 0.65;
     position:absolute;
     z-index: 9001; 
     top:0px;
     left:0px;
     width:100%;
  }
  
  #popUpDiv {
      position:absolute;
      background-color:white;
      width:551px;
      height:779px;
  border:10px solid white;
      z-index: 9002; 
  }
  </code></pre>
  
  <p>How can I move the close button so that it is on the border and not causing that extra white space due to the button image height? </p>