title: How to "z-index" to make a menu always on top of the content
body: <p>I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it. Sorry for my English. Thanks in advance.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  body { margin: 0; }
  
  #container {
      position: absolute;
      float: right;
      z-index: 1;
  
  }
  
  .left1 { 
      background-color: blue;
      height: 50px;
      width: 100%;
  
  }
  .left2 { 
      background-color: green;
      height: 50px;
      width: 100%;
  
  }
  
  
  #right { 
      background-color: red;
      height: 300px;
      width: 300px;
      float:right;
      z-index: 999999;
      margin-top: 0px;
      position: relative;
  }
  
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;div class="left1"&gt;LEFT BLUE&lt;/div&gt;
  &lt;div class="left2"&gt;LEFT GREEN&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="right"&gt;RIGHT RED&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>