How to make div appear in front of another

Question

Please refer to the codes below     lt ul gt    lt li style  height 100px  overflow hidden   gt     lt div style  height 500px  background-color black   gt     lt  div gt    lt  li gt   lt  ul gt    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  lt div gt  black background  In other words  how can I make the  lt div gt  appear in front of  lt li gt

User · Answer

You can set the z-index in css   lt div style  z-index  -1  gt  lt  div gt

User · Answer

In order an element to appear in front of another you have to give higher z-index to the front element  and lower z-index to the back element  also you should indicate position  absolute fixed     Example   lt div style  quot z-index 100  position  fixed  quot  gt Hello lt  div gt   lt div style  quot z-index  -1  quot  gt World lt  div gt

User · Answer

I think you re missing something   http   jsfiddle net ZNtKj    lt ul gt    lt li style  height 100px overflow hidden   gt     lt div style  height 500px  background-color black   gt     lt  div gt    lt  li gt   lt  ul gt   lt ul gt    lt li style  height 100px   gt     lt div style  height 500px  background-color red   gt     lt  div gt    lt  li gt   lt  ul gt    In FF4  this displays a 100px black bar  followed by a 500px red block   A little bit different example   http   jsfiddle net ZNtKj 1    lt ul gt    lt li style  height 100px overflow hidden   gt     lt div style  height 500px  background-color black   gt     lt  div gt    lt  li gt   lt  ul gt   lt ul gt    lt li style  height 100px   gt     lt div style  height 500px  background-color red   gt     lt  div gt    lt  li gt    lt li style  height 100px overflow hidden   gt     lt div style  height 500px  background-color blue   gt     lt  div gt    lt  li gt    lt li style  height 100px overflow hidden   gt     lt div style  height 500px  background-color green   gt     lt  div gt    lt  li gt   lt  ul gt

User · Answer

The black div will display the full 500px unless overflow hidden is set on the 100px li

User · Answer

Upper div use higher z-index and lower div use lower z-index then use absolute fixed relative position

User · Answer

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

[html] How to make div appear in front of another?

Examples related to html

Examples related to css