I am using drop-down menu in my header for notification, but when drop down opens all the div's behind that are visible then I gave z-index to all the divs but the links on those div's are not clickable now!
drop-down div CSS:
.drop-down{
overflow:scroll;
overflow-x:hidden;
}
and the div's behind it are
#main-div{
z-index:-1;
position:absolute;
}
I guess that the negative z-index places the links underneath the body.
Use a positive z-index, for example 10 on the element that should be at the back and 20 on the element that should be in front.
Related
I've created a div that I have positioned absolutely over this map:
Here, the element I'm talking about is a div containing the four white ovals. So this div has position: absolute; z-index: 1. Now notice the hamburger button in the top right - this opens the side navigation menu, like this:
However, as you can see, the aforementioned div is rendered on top of the the nav menu, which I've assigned a z-index of 2 to. (I've also tried significantly higher numbers). I seemingly can't tweak the z-indicies such that the side menu renders above this div. How can I fix this?
This is not an issue when I set the position of the div to relative, however, for aesthetic purposes I need it absolute.
It is worth noting that the side menu is contained in a wrapper element, which comes before the main tag that the aforementioned div is within, i.e
<wrapper> /*side menu is here */ </wrapper>
<main> /* div with ovals is here */ <main>
I don't know how your Side Menu is rendered, is the menu in the wrapper or the button, maybe it's been appending outside the wrapper.
If this isn't the case than try adding an extra class to a container (body or html) does also work if the Side Menu is open.
Than add a css rule which applies on the overlay buttons, but check if the open class is appended and than change the z-index to -1
Example:
#buttonDiv {
z-index: 1;
}
body.sideMenuOpen #buttonDiv {
z-index: -1;
}
I hope I could help
I have a div element which is header and is fixed. I want it to remain at top of my website while other contents move below it while scrolling.
Below this header is a div element containing two div elements, one is floated left while other right.
Now when i scroll down my webpage left floated div element moves below the header as it should. However the other div element is moving over the header. I tried using z-index but it's not working. Please help.
Please add the sample code to understand the problem.
Try adding z-index to the parent. Something like this
.fixed{
z-index:1;
}
.float-parent{
z-index:0;
}
I'm facing problem using z-index for relative and absolute position properties, below orcitMultiselectTreeviewDropdownInner is child div of orcitMultiselectTreeviewDropdown. z-index is working as expected but I have scroll bar on the page when I scroll horizontal orcitMultiselectTreeviewDropdownInner div also change the position. How can I keep position where it should be normally even using horizontal or vertical scroll?
CSS:
.orcitMultiselectTreeviewPosition .orcitMultiselectTreeviewDropdown .orcitMultiselectTreeviewDropdownInner {
position: relative;
z-index:999999;
}
.orcitMultiselectTreeviewPosition .orcitMultiselectTreeviewDropdown {
position:absolute;
}
1) If you want to position elements on top of each other using z-index, all parent elements of the child element that has a defined z-index, must also have defined z-indexes. Z-indexing positions things "on top of each other," as you seem to know, but it only works on child-parent interactions. (Doesn't matter if child or parent div is the one "in front" or "behind")
2) Try position:absolute; for both OR try positioning .orcitMultiselectTreeviewDropdownInner with left:0; top:0; or something
3) Try z-index:999; for one and z-index:99 for the other
I have created a popup that appears and nearly fills the screen, and this popup is fixed so that it will remain centered on screen when the user scrolls the main page. But this popup is also scrollable and I have a header at the top of it that I want to always be visible.
How could I fix the header such that it will always be visible when the popup window is scrolled?
It seems if you set position:fixed this is always relative to the browser viewport, therefore it would be fixed to the top of the page not its parent container. Is this a task for sticky positioning in Webkit, or how can that be achieved?
JSFiddle demonstrating the issue - scroll the blue popup and the yellow header scrolls away when I want that to be fixed.
Change your CSS styling of #header to the following:
#header {
position:fixed;
width: inherit;
height:2em;
background-color:yellow;
}
Working fiddle here
If your parent is having a position relative or absolute or fixed, then the child will position itself with respect to the parent element.
Add position:fixed to #header and padding-top:2em to make the text visible.
#header {
position: fixed;
width:100%;
height:2em;
padding-top:2em;
background-color:yellow;
}
Here is the Fiddle : http://jsfiddle.net/nmuk3cv6/3/
So I am making a site and I have a top bar with some box shadow. I then have a description box directly underneath. So I set the z-indexes to ensure that the top bars box-shadow would go over the description box with the following css:
#topbar{
z-index:9999 !important;
}
#description{
margin-top:0px;
z-index:-1 !important;
}
jsfiddle
you will notice if you change the margin-top, you can see that the shadow is being hidden underneath the description still!
why is this happening and how can I fix it?
note: neither element can have fixed or absolute positioning
Add position: relative to both elements. z-index only affects positioned elements.
Updated JSFiddle: http://jsfiddle.net/BAW23/3/