title: change div z-index from high to low if div crosses over other div when window resized?
body: <p>i have a div called 'start-button' with a higher z-index than an image on my page.</p>
  
  <p>Basically if a user shrinks the window width to anything lower than 1024x768 then i want the z-index of 'start-button' to be set below the image so that the image then appears on top of the other div. </p>
  
  <p>is there a way of using jquery of css to say that if the window width goes lower than 1024x768 then to change the z-index of the divs? or can i use something like css .start-button:width=37.7%{ to determine when the divs z-index should change.</p>
  
  <pre><code>&lt;div  class="start-button"&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css for start-button:</p>
  
  <pre><code>.start-button{
  
      border: 1px solid #3f3f3f;
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
      color: #434343;
      cursor: pointer;
      display: block;
       font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
      margin-top: 15px;
      margin-left:0px;
      padding: 10px;
      text-shadow: 0 -1px 0 #444444;
      text-align:center;
      width: 90px;
      height:20px;
      position:absolute;
      z-index:150;
      font-size:16px;
      font-weight:400;
      text-decoration:none;
      background-color:#cccccc;
      -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
      background-color:#333333;
  
      background-image: linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
      background-image: -o-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
      background-image: -moz-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
      background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
      background-image: -ms-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%);
      overflow:hidden;
  }
  </code></pre>
  
  <p>image css:</p>
  
  <pre><code>.header_logo_place{
      width:100%;
      height:525px;
      float:left;
      margin-left:4%;
      background-image:url(../img/image_logo2013.png);
          background-repeat:no-repeat;
          background-position:bottom left;
          position:relative;
          margin-top:-1px;
          z-index:230;
  
  
  }
  </code></pre>