z-index

[xagutxu]

Hi!
I want to position a layer in a HTML page, but I can't achieve it. I have the following code:

<form action="...">
<label for="first"><input type="text" name="first" value="" />
<div class="layer">...</div>
<laber for="second"><input type="text" name="second" value="" />
...
</form>

The CSS for the class "layer" is:

div.layer{
width: 50px;
height: 50px;
border: 1px red solid;
position: relative;
left:100px;
top:0px;
z-index:2;
}

But the div "layer" don't appear over the other elements. It makes move the other elements, taking a place and displacing the other elements. So, I conclude that I haven't created any layer...

Anybody can help me?

Thank you,

Xagutxu

[codewall]

try setting z-index to 1000

[scottloway]

Relatively positioned elements still retain their natural place in the page flow, so are supposed to behave in the way (I think) you're describing. z-index in this case isn't your issue, I think what you may want instead is to set position to absolute, effectively removing your layer div from the flow, and then you can play with z layering, etc. Note that absolutely positioned elements will position themselves relative to that element's first positioned parent, so you'll want to set a position context on your form (i.e. position: relative).