I've got a problem. I have a drop down menu, but the drop down list is always one layer behind the body although the z-index of menu is set to 999 and z index of body set to -999
Please chceck http://www.w3dominik.com/x/finemoney/ (the menu on top right, it says dropdown and should have 2 options, only 1 is now visible)
Thanks for help
This will fix it for you:
#header_wrap {
position: relative;
z-index: 10;
}
You often need to set the z-index on the outermost parent (particularly in older versions of IE).
Just add position: relative, z-index won't work without position.
header ul {
display: inline-block;
float: right;
height: 30px;
z-index: 999;
position: relative;
}
Related
Here is my work I have done so far: Social Network
If in the class .cover-profile I change the value of z-index then the link stop working for the class .navigation.
I have fixed the navbar at the top and want other things to be behind the navbar when scrolling.
try to use as
.navbar {
z-index: 2;
}
.cover-profile {
z-index: 1;
}
What is .cover-profile?
I delete z-index from .cover-profile, and add z-index to navbar
.navbar {
display: inline-block;
top: 0;
width: 100%;
height: 70px;
background-color: #eb3b5a;
position: fixed;
z-index: 1;
}
You can check it here
https://codepen.io/anon/pen/mKbVaE
That's because you place the whole .cover-profile class behind the <body> of your page. That's why it's not working.
Please check the below link
https://codepen.io/anon/pen/mKbVgr
Issue is here .cover-profile { z-index: -1; }
Regarding the z-index property, it specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
In this case "cover-profile" has a z-index of -1, it will be placed behind your body.
www.codepen.io/BlueRedOne/pen/rOpjxN
If you hover over Musikfest 2017 you will see it and i has the z-index on 0 and the navigation on 1 but it doesn't work.
Give every element with z-index a position: relative.
z-index won't work without any form of position applied to the element.
Just add z-index, position to nav ul like this: Demo
nav ul{
margin-left: -40px;
width: 100%;
list-style-type: none;
z-index: 9999;
position: relative
}
You can remove all other z-index which used. Hope this is what you want !
give your <ul> which is the pulldown position: relative; then it will above your content
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
Got a fixed div with a tag cloud hanging on a side of a page. It overflows footer divs. And i need it to scroll under. Can't really set a z index to -1 since it's on top of another div.
Tried setting up z-index where footer would have greater one. Didn't work. Any ideas?
Thanks!
Old topic but I had the same issue on my project. Z-index works... if you give the element it should scroll under a position. So let's say you have:
<div id="floating">I'm a cloud</div>
<footer>I'm a rock</footer>
Then your CSS should look something like this:
#floating { position: fixed; top: 100px; right: 100px; z-index: 50; }
footer { position: relative; z-index: 999; }
I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.
#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }
Now the drop-down menus, above the form, are hidden behind it.
I attempted to set a higher z-index for the menu:
.nav-menu{
position: relative;
z-index: 1; }
But this had no apparent effect. I tried 1, 100, 1000... nada
I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.
I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?
Thx
Here is the solution of your problem -
CSS:
style.css line: 1431
.site {
margin: 0 auto;
max-width: 68.5714rem;
/*overflow: hidden;*/ /* remove this css rule and you will see the dropdown menu*/
}
Note: Check you site that where your .site class is applying and make the changes in css as per need.
Screen Shot:
Remove position: absolute from #formContainer.