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
Related
How can I change the value of the z-index for the icons in the toolbar menu of React Apexchart.
No matter how high I place my element they are always above it.
Little bit too late but make sure to add the z-index property (z-index:12 should be enough) to the parent (or the higher parent) of the element you want to display above the apexchart toolbar. I've tried every parent of my element until it worked with a div !
Somewhat late, but still an issue. Not sure why but the z-index of the apexcharts-toolbar is 11 by default, so just put this somewhere in your css:
.apexcharts-toolbar {
z-index: 0 !important;
}
This might screw up things in certain arrangements of chart displays but so far it has work pretty decent for me.
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
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;
}
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.
I have a problem with my image animation frame. The easiest way to show my problem is just showing my website :-).
http://www.nouvelle-moi.be/
put your browser in a window and scroll down. You'll see that the image slides over the header. How can I resolve the problem?
Truth is, the Facebook buttons are floating over your header as well. The z-index property is designed for you to explicitly specify which element supersedes the other. By setting the z-index to something like 999 the header will remain on top of all other elements,
By adding this CSS to your website the header will remain on top of the other elements
#header {
z-index: 999;
}
Try setting the z-index css property of the header to 10. That should solve your issue.