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.
Related
I am trying to get the effect seen on many sites where on hover an image appears that is clickable. For example, when an element is hovered over the bin image appears using ::before. I would like to make this clickable.
The image is displayed on the section div using:
.section:hover::before {
content: url("#/assets/icons/bin.svg");
display: block;
position: absolute;
top: -10px;
right: 25px;
background-color: white;
}
I understand from reading many similar posts that the pseudo element itself does not allow for this but I am wondering how this effect is achieved.
simply add an <a> tag with href pointing to where you want...
this is going to be embarrassing, but I haven't been writing code/css for a while, so please bear with me ;-)
All I need is a simple drop down menu, but for some reason the one I came up with does not work, the drop down disappears when moving the mouse down, and text (from my main content) gets overlayed. I suspect this is happening because I use absolute position for my elements, but there must be a solution other than moving content down by stating #main top: 300px;
http://dynomotion.com/dev/home/About.html
Any ideas?
Thanks,
Sascha
Your #main div is covering up the #menu div which blocks the functionality you are seeking. You can solve this by adjusting your #menu statement in style.css to include a z-index.
For example:
#menu {
position:absolute;
left: 12px;
top: 80px;
z-index: 2;
}
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 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
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.