CSS Z-index在用jQuery动画div时不起作用？

Question

Can anyone help me make the red div roll OVER the blue paragraph?

http://jsfiddle.net/B3rQR/1/

I tried doing it with z-index, but couldn't make it work:

div {
    z-index: 1;
}

p {
    background-color: blue;
    z-index: 0;
}

Sorry if this is a noob question.

Thanks in advance!

Answer 1

Sure, just add position:relative; to your div's rules. z-index only works on positioned elements.

jsFiddle example

Answer 2

You can position the <ul> or the <div> - eg

ul {
background-color: yellow;
width: 100%;
height: 50px;
z-index: 1; /* z-index doesn't work on statically positioned elements */
position: relative;
}

http://jsfiddle.net/B3rQR/2/

Answer 3

add position: relative; in div