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.
Related
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;}
so i have this fiddle http://jsfiddle.net/speeedracer/CGucm/ and as you can see when you mouse over any of the links across the top row, the popup div is under the list elements of the bottom row. anyone know how to get it to cover over the other page content? i changed the z-index to be really high so it appears on top, but it didn't work.
here's the drop-down box code:
enter code here.drop-box {
display: none;
position: static;
width: 400px;
height: 100px;
z-index: 9999;
background: #e8dfc2;
}
*i know i have some visual spacing issues, but i just need a working mockup without it having to be perfect...yet.
thanks!
z-index does not work with position: static. This is as if you had no position.
So changing your position: absolute will solve your problem and z-index will come into play.
I have a "red" div, which I want to force under the "black" div and under the text in the footer And "red" div shoudld be over div with class f_content. See my fiddle.
Where is my fault?
What should I change...?
Tricks with z-index give negative effect.
Thank you for your time.
You are on the right track, you do that with z-index. Just remember to always set the position to the element you want to set the index of.
See below, the red div is under the black one but above the blue footer:
Working demo
Basically this is the only change needed in your code:
.wsp_box_data .image {
position: relative;
z-index: 2;
}
I got, a solution:
`f_content`
position: relative;
z-index: 2;
`image`
position: relative;
z-index: 3;
`cow_object`
z-index: -1
live solution
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
Is there a way cover an item below with the box shadow of the item above it?
Please take look at:this example
Is there a way to cover the the white box with the shadow of the red box? Thanks in advance.
Give both boxes position: relative and give the red box a higher z-index than the white box:
#d1, #d2 {
position: relative;
}
#d1 {
/* Other styles */
z-index: 1;
}
#d2 {
/* Other styles */
z-index: 0;
}
#red-box { z-index: 2000; }
#white-box { z-index: 1000; }
A higher z-index means that it'll be placed on top of lower z-indexed items.
By the way, very useful that your page reloads itself so I cannot change the stylesheet from Web Inspector to test this.
If you give it (the top one) position:relative it will work.
set position: relative on div 1 before tinkering with z-index