title: How do I move the "exit" button so that it's in the top right corner of my modal box?
body: <p>Details:
  I have a background image, and I have a square image that I made in Illustrator that I want to place on top. (This is acting as the button that will open the modal window) However, the "close" button for the modal window is appearing below my background image rather than in the top right corner of the modal window. I'm new to HTML/CSS and any help is appreciated! </p>
  
  <p>This is my style.css:</p>
  
  <pre><code>div {
     position: relative;
     top: 0;
     left: 0;
  }
  
  .home {
     position: relative;
     top: 0;
     left: 0;
  }
  
  .city1 {
     position: absolute;
     top: 350px;
     left: 40px;
  }
  
  #overlay {
     visibility: hidden;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     text-align: center;
     z-index: 1000;
  }
  
  #overlay div {
     width: 600px;
     height: 600px;
     top: 300px;
     left: 220px;
     background-color: #FFF;
     padding: 15px;
     text-align: center;
  }
  </code></pre>
  
  <p>This is my test.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;script src="popUp.js"&gt;&lt;/script&gt;
     &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;div&gt;
        &lt;img src="background.jpg" alt="homeScreen" class="home"/&gt;
        &lt;div id="overlay"&gt;
           &lt;div&gt;
              &lt;img src="" alt="province1"/&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;img src="city1.png" class="city1" onclick='overlay()'&gt;&lt;/a&gt;
     &lt;/div&gt;
        &lt;a href='#' onclick='overlay()'&gt;&lt;img src="exit.png" class="exit"/&gt;&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my popUp.js:</p>
  
  <pre><code>function overlay() {
     el= document.getElementById("overlay");
     el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }
  </code></pre>