Member Avatar for chris.aaker

I have a menu that is being obscured by a text field. I tried setting the Z-index in the CSS to 1 and 2 respectively and set the position to relative (w3 schools sais the positioning must by relative, absolute, or fixed) for the Z index to have effect but still is obscured.

I want this input text element to be underneath the menu element sddm. I'm guessing it has something to do with the child nodes but I'm not sure?

input.text4
	{
	position:relative;
	z-index:1;
	font-size:16px;
#sddm
	{	
	position:relative;
	z-index:2;
break.jpg 3.55 KB
  • 3 Contributors
  • 2 Replies
  • 194 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tinymark

Dani AI

Generated

Agree with — this behaves like a stacking‑context problem rather than a simple z‑index bug. Once an ancestor forms a stacking context, its children are stacked together and cannot be drawn above children of a different ancestor even if you bump a child’s z‑index. Common properties that silently create stacking contexts include transforms (any transform other than none), opacity less than 1, CSS filter, will-change, and positioned elements with an explicit z‑index — so look for those on the input’s ancestors.

How to debug quickly:

  • Use the browser inspector and walk up the DOM from the input; check each ancestor’s computed styles for z-index, transform, opacity, filter, or will-change.
  • Temporarily add an outline/background to ancestors to visually see which container is above which.
  • As hinted, viewing the full markup/CSS makes this trivial to spot — the offending property is usually on a wrapper element you didn’t expect.

Two reliable fixes:

  • Lift the menu out of the lower stacking context and append it to the document root when shown (then absolutely position it). Example (vanilla JS):

    var menu = document.getElementById('sddm');
var trigger = document.getElementById('menuTrigger');
function showMenu() {
  var r = trigger.getBoundingClientRect();
  menu.style.position = 'absolute';
  menu.style.left = (window.pageXOffset + r.left) + 'px';
  menu.style.top  = (window.pageYOffset + r.bottom) + 'px';
  menu.style.zIndex = 9999;
  document.body.appendChild(menu);
  menu.style.display = 'block';
}

  • Or fix the stacking context: remove/avoid the transform/opacity on the ancestor, or give the menu’s nearest ancestor a higher z‑index than the input’s ancestor so the whole menu stacking context sits above.

Avoid "massive z‑index numbers" as a permanent solution — they mask the real stacking context issue.

Recommended Answers

All 2 Replies

Member Avatar for floatingDivs

Care to post your entire HTML/CSS code? I despise having to guess the issue.

Member Avatar for tinymark

It's more than likely a parent issue. If the parent of the text box is set for z-index:2 and the parent of the menu is z-index:1 you cannot promote the child of the one higher than the other. Any z-index you change on the menu will take it higher on it's parent, but it's parent is below the text box's parent.

I hope this helps.

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.