I have a dropdown menu that hides behind a div even though I've set for it a much higher z-index here's a screenshot.
Hidhing menu
By the amount of information I can collect after seeing that screenshot I can say it is either 1 of the following 2 problems:
1. The parent div of the div with class 'dropdown-menu' do not have "position: relative" property applied to it.
2. Two divs need to be sibling to each other to hide or show one of them behind the other using z-index (they can't have parent child relationship).
Related
I am currently trying to create a landing page for a photoshop layout. I am quite new to HTML and CSS and I am having trouble solving this. My drop-down menu lists are getting covered by the content. I think it might be about positioning... Thanks
I will attach a picture and I will also share my code if needed...
Dropdown menu getting covered by content (positioning) IMAGE
As previously stated you can use z-index to determine how elements are rendered on top of each other. Elements with an higher z-index are on top of elements with a lower z-index.
According to the MDN docs:
The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
Just but z-index:999; on your dropdown.
Objects with higher z-index number will go above those with lower numbers.
Add the CSS attribute z-index: 999; to your dropdown's CSS. Not necessarily should it be 999, but just that 999 is the maximum one can use in z-index.
The property of z-index is that a division with a higher z-index will be displayed above a division with a lower number in the z-index, therefore allowing you to decide the hierarchy of the appearance of different divisions.
To know more, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
If z-index is not solved, you can check nav container and if you found overflow-y you can comment that line.
I'm using a javascript library to create modal windows in my application.
I'm having a problem where there are 2 divs, A and B (A is parent of B) both position:fixed. Div A has z-index:1 and the Div B z-index:3.
I want another div, C, also with fixed position but external to these two, be in between them (with z-index:2), but it ends up on top of all. Apparently the child div(B) z-index does not matter at all and always stays on bottom of div C..
I made a JSBIN with the sample here:
http://jsbin.com/koyasu/edit?html,css,output
This is just how z-index works. The parent div sets the layer for it and all of its children. Children who set a z-index will only be changing their layer inside that parent.
You'll have to restructure your DOM for this one, I'm afraid.
A fixed position always refers to the viewport, so you might as well take DIV "B" out of "A", getting three fixed elements on the same level. Then z-index can be applied more relieable.
I am trying to show a hidden Div on click event using JS. This Div contains UL which sometimes happens to be of height more than the parent Div. In such cases, parent Div scroll appears.
What I want is to show this list inside a child Div, on top of parent Div. This way the height of list will not affect the UI of page.
Here's the image of what's happening :
Note: Blue border represents the parent Div & list with grey background is inside a child Div.
And I have already tried applying position:relative;z-index:9999;
Make sure to give the parent a zindex (lower) too. See Z-index does not work in ie fir more ideas.
I have gridview..and inside gridview i have put dropdown.. now whenevent user selects dropdown the dropdown list doesn't and it overlaps the div element
as shown in below image. i have applied Z-index in my CSS how can i solve it?
Thanks
You just check where & how you are using the z-index because if you will give the maximum value of z-index into your drop-down list than it will not overlap the div element below the image.
or just show us your example code.....
I'm trying to use z-index to layer a button and a div. The button appears behind the div, while according to z-index it should be in front of it. Here is the style elements associated with the button & div as captured by Firebug:
Note that the button has a z-index of 2, the div has a z-index of 1, and both are position:relative.
Full HTML is in this pastebin.
z-index is a relative, not an absolute value.
An object with z-index 10 billion will not appear on top of all elements on the page, only on top of other elements in the same stacking context
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
In the CSS hierarchy you posted, it looks like the button and div are contained in different elements (#note18 and #note19), so you'll have to make sure that those elements aren't creating different stacking contexts which will make any z-indexes for elements inside them irrelevant to each other.