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="" />

The CSS for the class "layer" is:

width: 50px;
height: 50px;
border: 1px red solid;
position: relative;

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,


try setting z-index to 1000

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).

commented: Good describing. +3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.