Member Avatar for Virangya

hi,
how to display a div on top off all the other content?
i tried style=" position:relative; left:0px; top:0px; z-index:100;" which didn't work, then when i used position:absolute; it worked but, it displays in a totaly in appropriate position because of position:absolute . how can i make this happen? when i use position:relative; all the other content under it jumps down...
much appreciate reply...

  • 4 Contributors
  • 7 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Virangya

Dani AI

Generated

For a dropdown that sits over other content (what called layered over), anchor the submenu to its trigger, not to the page. Use a positioned container plus an absolutely positioned submenu so its coordinates are relative to the trigger.

Example pattern you can drop in:

<nav>
  <ul>
    <li class="has-sub">
      <a href="#">Menu</a>
      <ul class="submenu" role="menu" aria-hidden="true">
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
      </ul>
    </li>
  </ul>
</nav>
.has-sub { position: relative; }
.submenu {
  position: absolute;
  top: 100%;    /* directly below the trigger */
  left: 0;
  z-index: 1000;  /* higher than page chrome */
  display: none;  /* hide by default */
  min-width: 12rem;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu { display: block; }

Why this fixes the jump you saw with position:relative: relative elements stay in normal flow (they keep their space), while absolute elements are removed from flow and can overlay neighbors. Also, z-index only affects positioned elements and is scoped by stacking contexts, so placing z-index on the submenu (and, if needed, on its positioned ancestor) makes it layer correctly. If it still appears behind something, look for ancestors that create new stacking contexts (e.g., transforms, opacity) and adjust where the submenu lives or raise the ancestor’s stacking order. MDN on position, MDN on z-index, and MDN on stacking context.

One more gotcha: if a parent has overflow:hidden, it will clip the dropdown. Either move the submenu outside that container or set the parent’s overflow to visible. MDN on overflow.

mentioned position:fixed; reserve that for viewport-pinned UI (e.g., a sticky bar). It is relative to the viewport and can break menu alignment; it is not ideal for a submenu. MDN on fixed positioning.

Recommended Answers

All 7 Replies

Member Avatar for shahbaz13

Using position:fixed may fix this... But it may not work in IE without declaring <!doctype html> ...

Edited by shahbaz13 because: n/a
Member Avatar for teedoff

We cant guess at what you want. Can you provide a link to your site?

Member Avatar for Dandello

Are you wanting the div in question to be above the rest of the content or layered over the other divs?

Either position:fixed or position:absolute should do it. But having a declared doctype is a must.

Member Avatar for Virangya

Are you wanting the div in question to be above the rest of the content or layered over the other divs?

Either position:fixed or position:absolute should do it. But having a declared doctype is a must.

umm... i don't really know which one, but i want that div to be like a drop down sub menu item.. you know it display over other contents..

Member Avatar for Dandello

Okay, it sounds like you want it to be dynamic on top of everything else?

We really need a link to the site in question or see the css and the html so see what you're talking about.

Member Avatar for Virangya 
position:fixed

is working but it wont fix my alignment issue .. :(
look at this site it explains about the kind of menu i'm working in...
yeah i do have a declared doctype.

Edited by Virangya because: n/a
Member Avatar for Virangya

ok guys thanks for all of your replies , i found a way to do it with position:absolute
and later adding left and top values through jquery. now it works thanks... :)

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.