I'm adding a new dropdown div to an existing WordPress theme with it's own dropdown menu.
The new dropdown is activated and "dropping down" from an area above the menu.
The menu is set to z-index:99, but whatever value i give "my dropdown", the menu still appears on top of it.
Only exception is if i give the menu z-index:0, then all works fine except that the menu's dropdowns, of course, does not overlap items further down the page :/
Help appreciated!
Update: I have tried different position values, the menu needs to be "relative" to work.
The dropdown is now absolute, but relative gives the same result.
You have the following declared in your styles.css stylesheet on line: 316:
#section-tophat, #section-footer, #section-sub-footer { position: relative; z-index: 1; } /* Setup for :after double bgs below */
You're setting your #section-tophat to z-index:1 and thus at a lower level than your menu, so just remove your #section-tophat id from that line and your dropdown works fine.
z-index only work on position relative, absolute & fixed. So, give position:relative to your dropdown DIV.
Do you have an example page that we can check? You also may have stacking context issues.
Check my answer about how z-index works.
Related
I have a searchbar in my navbar, and when you type something inside it, another div below it appears with results according to your typing,
I want to put this div above all of the others, because for now the div with the results goes under the website content...
I tried to put a "z-index: 999" on it, but nothing changes,
To test it
- Go on the films page of my website : https://ofilms.herokuapp.com/films
- Click on the "search" icon in the navbar
- Type "Avengers"
- See the results div going under the other div
Add position: absolute to your CSS.
As per my understanding, z-index will only work with position as absolute or fixed. I have never tried with position as relative. We can experiment that as well. :-)
Not sure if this works, but you could try giving the ! important parameter too:
z-index: 99 !important;
i have a sidebar menu on my WordPress widget area, and sub-menu items are displayed under main content, i can't make it work with z-index, where should i put CSS code to make it work
i tried adding z-index to my style codes, and nothing happened, maybe i put them in a wrong place or i have to use some sort of other code with style code
you can see the problem on the main page
website address is: http://www.nanotajhiz.com
This happens because you have overflow: hidden; on your .sidebar which holds the items, which causes any content that goes outside the sidebar to be hidden.
You should remove overflow: hidden from .sidebar and adjust the other layout styles accordingly. You can use the clearfix method instead ( What is a clearfix? ).
My drop down menu blocked my comment tab. Any css / jquery can let the menu show in front ?
Try setting z-index value for the menu in CSS
li
{
z-index:10;
}
The tag with higher z-index value is shown above the ones with lower z-index value. Read this
The title said everything, any ideas how can I fix it? Thanks. here's a print.
set position relative or absolute to both of them and set z-index value higher to the dropdown menu
for more about z-index visit here
I just can assume, without your code.
Try this in your CSS
.topNavigation{
z-index:99999;
}
Just read about Z-index Properties
at the same time please concern about other css properties as well
I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}