Member Avatar for 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

  • 3 Contributors
  • 2 Replies
  • 117 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by scottloway

Dani AI

Generated

Short answer: the behavior you saw is expected. is correct — a relatively positioned box is still in the document flow, so it will "take up space" and push other elements. 's "higher z-index" can be useful, but only when the element is removed from the flow and when it and the things it must appear above are in the same stacking context.

A practical fix is to take the overlay out of the normal flow with position: absolute (or fixed), and give a positioned ancestor (often the form wrapper) position: relative so the absolute coordinates are predictable. Also be aware that z-index only sorts elements within the same stacking context; transforms, opacity < 1, position + non-auto z-index, filter, isolation, etc., can create a stacking context that prevents a child from escaping to sit above siblings elsewhere.

Example pattern (positioning context + overlay):

<form class="form-wrapper">
  <input name="first">
  <div class="overlay">...</div>
  <input name="second">
</form>

.form-wrapper { position: relative; }

.overlay {
  position: absolute;
  top: 4px;
  left: 120px;
  z-index: 10;
  background: #fff;
  border: 1px solid #c00;
}

Quick troubleshooting checklist:

  • Inspect ancestors for transform, opacity, z-index or isolation — any of these may create a stacking context.
  • If clipping occurs, check overflow on parents (overflow: hidden can cut the overlay).
  • If you still can’t get it above other UI (or it's inside a constrained component), move the overlay out of that DOM subtree (append to <body>).
  • Use DevTools to inspect computed z-index and the stacking context; toggling position/z-index live helps reveal the issue.

Further reading: MDN: z-index and MDN: Understanding z-index / stacking contexts.

Recommended Answers

All 2 Replies

Member Avatar for codewall

try setting z-index to 1000

Member Avatar for 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).

Edited by scottloway because: n/a
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.