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.....
Related
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).
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 was wondering if anyone knows how you can overlap a button with a label in HTML.
For example:
Is this easily done with css? I have tried absolute positioning to no avail
Is this what you want?
http://jsfiddle.net/y9dfX/9/
I created a container div with position:relative which contains the button and label. Then i just set the label with position:absolute and added top and left positions. Only drawback is that you have to set the positions manually.
I have an html page with a z indexed dropdown menu. I have this dropdown menu positioned absolutely.
with some given left and top values. The problem is the dropdown menu is at its place when the window is full screen but when the window is changed in size ( made lesser than the pc window the z indexed element shifts in position which makes it look awkward. I know it is due to absolute positioning.
can anybody please tell me how to fix this ? how to make the dropdown stay always in place. attached is the image.
Make sure that the containing element has 'position: relative;' set on it, the top / left values are based on the first containing element with a position set. If the containing element does not have a position set, it will try the next parent, and so on until it finally defaults to the body.
Here's an example:
http://jsfiddle.net/erinfreeman/AHWS2/
div with the id of 'one' has position relative, so the child div bases its bottom / right co-ordinates from that. the div with id of 'two' doesn't have position set so the child div goes to the next parent
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.