title: prevent image overlap with CSS
body: <p>I am having a problem with images overlapping each other when the browser window is resized. I feel like fixing it may have something to do with the <code>z-index</code> function, but I'm not certain as I am not very skilled with CSS.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>    body {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
     font-weight: 300;
  }
  
  #bottomleft_picture {
      position: fixed;
      top: 50%;
      right: 50%;
      /* bottom left */
  }
  #topright_picture {
      position: absolute;
      top: 30%;
      left: 50%;
      /* top right */
  }
  #bottomright_picture {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      /* bottom right*/
  }
  #topleft_picture {
      position: absolute;
      top: 30%;
      right: 50%;
      clear: both;
      /* top left */
  }
  #topleft_inner_box {
      position:absolute;
      background-color: black;
      opacity:0.4;
      height:40px;
      width: 100px;
      top: 35%;
      left: 35%;
      margin: 0 auto;
  }
  #topright_inner_box {
      position:absolute;
      background-color: black;
      opacity:0.4;
      height:40px;
      width: 100px;
      top: 35%;
      right: 30%;
      margin: 0 auto;
  }
  #bottomleft_inner_box {
      position:absolute;
      background-color: black;
      opacity:0.4;
      height:40px;
      width: 100px;
      top: 40%;
      left: 35%;
      margin: 0 auto;
  }
  #bottomright_inner_box {
      position:absolute;
      background-color: black;
      opacity:0.4;
      height:40px;
      width: 100px;
      top: 40%;
      right: 30%;
      margin: 0 auto;
      text-align:center;
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; Test Title&lt;/title&gt;
  &lt;link rel="stylesheet" href="index_style.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- add logo here --&gt;
      &lt;div id="bottomleft_picture"&gt;
              &lt;div id="bottomleft_inner_box"&gt;
              &lt;/div&gt;
              &lt;img src="menu.jpg"&gt;
  
      &lt;/div&gt;
      &lt;div id="topright_picture"&gt;
          &lt;div id="topright_inner_box"&gt;
          &lt;/div&gt;
          &lt;img src="welcome.jpg"&gt;
          &lt;/div&gt;
      &lt;div id="bottomright_picture"&gt;
          &lt;div id="bottomright_inner_box"&gt;
          &lt;/div&gt;
          &lt;img src="contact.jpg"&gt;
  
      &lt;/div&gt;
      &lt;div id="topleft_picture"&gt;
           &lt;div id="topleft_inner_box"&gt;
           &lt;/div&gt;
          &lt;img src="news.jpg"&gt;
  
      &lt;/div&gt;
  
  &lt;!-- add footer --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Notice when the window is resized, some of the photos eventually begin to overlap the others. I am trying to make it a more responsive layout that can work on (most) size windows. Any insight into what I can do is greatly appreciated :)</p>