How to make div appear in front of another?

Question

Please refer to the codes below :

<ul>  <li style="height:100px; overflow:hidden;">   <div style="height:500px; background-color:black;">   </div>  </li> </ul> 

From the codes above, we know that we can only see 100px height of black background. My question is how can we see 500px height of <div> black background? In other words, how can I make the <div> appear in front of <li> ?

Answer 1

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.

Note that for this to work, you also need to set a position style (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.

Answer 2

You can set the z-index in css

<div style="z-index: -1"></div>