title: How to make div appear in front of another?
body: <pre><code>&lt;div style="position:relative; overflow:hidden; height:300px; z-index:1; background-color:red;"&gt;
      &lt;ul style="position:relative; overflow:hidden; height:800px; z-index:2; background-color:blue;"&gt;
          &lt;li&gt;
              &lt;div style="height:500px; background-color:black; position:relative; z-index:3;"&gt;
              This is div
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>1st question - From the above codes, the webpage shows 300px height of <code>&lt;ul&gt;</code> and 300px height of <code>&lt;div&gt;</code> only, how to make the webpage shows 800 height of <code>&lt;ul&gt;</code> and 500px height of <code>&lt;div&gt;</code> without changing overflow property and without changing the height of 1st <code>&lt;div&gt;</code>(300px)? Already got the answer from Omabena. I just need to change position of 1st div to static and ul to absolute.</p>
  
  <pre><code>&lt;div style="overflow:hidden; position:static; height:300px;  background-color:red;"&gt;
  &lt;ul style=" position: absolute; overflow:hidden; height:1500px; background-color:blue;"&gt;
      &lt;li&gt;
          &lt;table&gt;&lt;tr&gt;&lt;td&gt;
              &lt;div style="height:500px; background-color:black; position:static; z-index:3;"&gt;
                  This is 2nd div
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="height:500px; background-color:green; position:relative; z-index:3;"&gt;
                  This is 3rd div
              &lt;/div&gt;
          &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>2nd question - From the above codes, how to make the webpage shows 300px height of 2nd div and 500px height of 3rd div. I mean the 2nd div must hide inside the 1st div which has 300px height only.</p>