title: How to get a div with z-index to overlay another div on hover
body: <p>I have a container <code>div</code> with several smaller <code>div</code>:s inside, all of them with <code>float:left;</code>. If I hover one of the smaller <code>div</code>:s the <code>height</code> and <code>width</code> should be increased and it should overlay the other <code>div</code>:s without moving them.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="boxcontainer"&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box {
    float:left;
    position: relative;
    width:150px;
    height:150px;
    margin:5px;
    background-color: yellow;
  }
  
  #boxcontainer {
    position: relative;
    width:500px;
    height:auto;
  }
  
  .box:hover {
    z-index:100;
    width:300px;
    height:auto;
  }
  </code></pre>
  
  <p>How can I achieve this?</p>