It seems that my dropdown menu its z-index is doing something strange:
https://uma.be/evenement/uma-day-2020-best-media-campaigns/
When you hover the menu-item "Commissions", the dropdown menu goes underneath the image.
I've already checked the z-index of the image itself and the z-index of .mega-sub-menu. Both seems okay to me. The class .mega-sub-menu has an z-index of 999 and the image hasn't got one.
I've added position: relative; z-index: 1; to the image, but that didn't fix the issue.
Is it possible that the Lazy loader does something with the image so that it goes over the sub navigation?
This is because your image and the menu are not in the same stacking context. To ensure that they are in the same stacking context, you will need to find out the parent element of both elements that are siblings to each other.
In this case, that will be:
#wrapper-navbar as the parent element for the dropdown menu
#tribe-events-pg-template as the parent element for the contents of the page (which includes the image)
All you need to do is:
Set the z-index of #wrapper-navbar to 2
Relatively position #tribe-events-pg-template and set its z-index to 1
Updated CSS:
#wrapper-navbar {
position: relative;
z-index: 2;
}
#tribe-events-pg-template {
position: relative;
z-index: 1;
}
After fix is applied:
Problem is your #navbar's z-index property. Increase it or remove it and that should fix your problem
>
#wrapper-navbar {
position: relative;
/* z-index: 1; */
}
Edit the following (added the z-index and position):
#tribe-events-pg-template, .tribe-events-pg-template {
z-index: 0;
position: relative;
margin: 0 auto;
max-width: 1200px;}
Related
I am using the nuxt.js and I have a fixed header which I have a drop-down for changing the languages, but the problem is as I have set a height for header component when I click on the dropdown button it only shows up to that height
you can find the image to problem here:
https://ufile.io/g7tosuph
I have tried giving position: absolute to the drop-down items and also z-index of 9999 but no luck it is still underneath the other components in every page I have also made sure that the styles are note scoped in the .vue files
.header-whole {
background-color: #0e1e25;
position: fixed;
overflow: hidden;
height: 70px;
top: 0;
z-index: 1000;
width: 100%;
}
.lang-items {
position: absolute;
z-index: 9999;
overflow: hidden;
}
Could you provide some sample code?
I guess you have set your <header> position to "fixed", try to set your <header> z-index a z-index value, as well (greater than the <main> z-index value, if any).
I'm helping a client with her website and ran into a problem.
On the responsive version of our menu, when I hover over a menu item with a few sub-menu items, those menu items display, but an element below is showing through the text as well.
The offending element is a testimonial slider that is dynamically updated, so I'm guessing that has something to do with it.
Here's a GIF: overlap problem
Here's a link to the site: http://gogift.com.au/wordpress/
Any help is greatly appreciated!
Thanks,
Paul
You have to set the z-index of the .header-row element. Because it is positioned relative and so it's z-index is the one that counts.
This is the header-row now:
.header-row {
position: relative;
z-index: 2;
}
change it to:
.header-row {
position: relative;
z-index: 2000;
}
you could also set the .header-row to position:static and then change the z-index of the #main-navelement:
.header-row {
position: static;
z-index: 2;
}
#main-nav {
border: none;
border-radius: 0;
position: relative;
z-index: 2000;
width: 100%;
}
Edit: As there is some confusion I want to add a bit more to this answer:
The navigation is in front of the content because there is no z-index set for the <div id="content">and it's children. So any element with a z-index defined will be in front of the content.
As the header-row has a z-index of 2 - the nav is in front of the content.
The problem is that the testimonial-slides have a dynamic set z-index between 90 and 100. As they have no parent with a defined z-index and relative position this z-index will be matched against the .header-row's z-index which is only 2.
One more alternative to solve the problem would be to set the z-index of <div id="content"> to 1.
Looks like it's one of two things: either the z-index of the menu isn't high enough or the background of the menu items is transparent.
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
Why in IE8, is the background color of a pesudo element flowing behind children of the parent? The text flows in front, but the background-color does not. Z-index did not seem to help any.
I haven't been able to determine if this is a bug in IE8 or not. It seems like this would have been a pretty common use-case, but I couldn't find many blog posts or SO questions related to it.
http://jsfiddle.net/VAg2E/
<div id="parent">
<img src="http://placehold.it/200x200">
</div>
#parent{ padding: 20px; }
#parent:before{
content: 'Behind the image';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
Edit : A related Stack Overflow Question about Stacking Order
This is definitely a bug in IE8; since your :before pseudo-element is positioned, it should create a new stacking context and always be drawn on top of the img unless you give it a negative z-index (even then, the entire element should be drawn behind it, not just its background).
This issue also seems specific to stacking between :before and :after pseudo-elements and replaced elements like img. It looks like IE8 is treating replaced content differently in terms of stacking, but whatever it is doing, it's definitely not conforming to the spec.
As you're probably aware, this is fixed in IE9.
Have your exact same issue, the only thing you can do is force the stacking order via CSS and z-index. The only catch is that z-index is placed on child element starting from parent element, so you wont be able to do a proper logic order as #parent-element {z-index: 2} and #child-element {z-index: 1}, the z-index for the #child-element will just be set to level 1 as a separate stack order inside the #parent-element.
You can still set z-index for the #child-element with a -1 value, it will just get back the whole #parent-element stacking order.
So to recap:
#parent-element { z-index: 99;} /* or any arbitrary number fitting */
#child-element {z-index: -1;}
Also remember to give both elements a position: relative/absolute to enable the stacking order fo z-index
IE8 only supports pseudos if <!DOCTYPE> is declared. Source
#parent { padding: 20px; z-index: 2; }
#parent:before {
content: 'Behind the image';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: -1;
}
I have problem with z-index again.
Please check page
http://webakery.asia/projects/valentine/
On the right side I have absolutely positioned picture with flowers, but they are overlaping navigation and eventually affect functionality of links in navigation. I want to hide those flowers behind navigation.
I have been playing around with z-indexes, but still cannot figure out the way. Can anyone help please?
Thanks
You have to change your z-index: 100 to z-index less than 50 (your navigation z-index) for section, e.g.
section {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
z-index: 20;
}
and add position: relative to your nav
nav {
background: url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
min-height: 66px;
position: relative;
z-index: 50;
}
i think div.flowers should be outside of your tag
try this.. make the z-index on section -1 and look how everything goes behind your nav.
i think you should move div.flowers outside of your block and then assign its z-index independently. As is, you can change it all day, but the z-index that matters belongs to