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

Recommended Answers

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 …

Jump to Post

All 2 Replies

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 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.