Positioning using Z-Index

Question

Can we position one HTML element above another element using z-Index ? Eg :

<div>One</div>
<div>Five</div>

Now one should be above five....

my question may be very basic but.........

Answer 1

Give the element that you need to show on top a higher z index value.

<div style='z-index: 2'>first</div>
<div style='z-index: 1'>second</div>

Read

Specifying the stack level: the 'z-index' property

Answer 2

I'm not what you're asking but the whole point of using z-index is positioning one HTML element above another.

You can have more information here.

Answer 3

give the three different divs a unique id like:

<div id="divOne">One</div>
<div id="divTwo">Two</div>
<divid="divThree">Three</div>

in your css stylesheet:

#divOne {position:absolute;z-index:1;}
#divTwo {position:absolute;z-index:2;}
#divThree {position:absolute;z-index:3;}

Answer 4

for z-index to work you need to have position set to absolute, relative or fixed for each div you want layered, you can then position the two elements above each other using left and top attributes.

The higher the z-index the 'higher' the div is. ie, z-index:1 with be above z-index:0, think of it as a stack of transparent sheets coming out of your screen towards you.

more info here:

http://www.w3schools.com/Css/pr_pos_z-index.asp

Answer 5

The same the z-index the less the preference of it as compared to the other layers. That is, a layer with z-index=2 will be rendered above a layer of z-index=1.

<div style='position:absolute;z-index:2'>first</div>
<div style='position:absolute;z-index:1'>second</div>