My collapsed dropdown menus are being hidden behind a sequence.js slider on Chrome and Safari. Issue doesn't appear to be happening on Firefox. Tried changing z-index on just about every object related to slider and menu. Much love to anyone who can inspect my site and tell me what I am doing wrong.
https://www.shopinspired.co/
It's not actually being hidden behind the slideshow.
This is due to the "sticky" class being removed from your header when you scroll to the top of the page. If #header always has .sticky, the menu shows fine.
It looks like your styles at the top of the page are targeting "header.sticky", not just "header".
Fix: Manually add the css:
#header {
position: fixed;
left: 0;
right: 0;
top: 0px;
box-shadow: 0 5px 5px -5px #333;
}
or change the CSS in the page head to target "header".
Explanation
Its is coming from the sticky header and a mismatch of positioned objects and forced heights.
By default, without the sticky header, the submenu is being hidden because it is a child element of a parent with a forced height due to some media queries. The overflow is being hidden.
When the sticky header is added, the header gets a position of fixed. You can not use absolute positioning relative to fixed elements. I am guessing your element is being positioned relative to the document window which is why it is now showing with the fixed attribute.
Related
I am having a problem with z-indexing on a website I am maintaining. It appears to be caused by z-indexing in the SuperFish Menu and a div. However, no matter where I put the position:relative/absolute & z-index: 99999 declarations, the menu is still getting stuck behind the third panel on the right.
To see this problem, you need to hover over Practice Areas, Then Real Estate. You will notice the sub-menu getting stuck behind the panel.
It's driving me nuts trying to figure this out.
The website is: http://174.120.240.5/~rushmars/
You have too much positioned elements. Lets look at the whole thing in a tree.
body - position: relative
#main
header - position: relative; z-index: 99
.primary_content_tail - position: relative; z-index: 9300
footer
As MDN says
A stacking context is formed, anywhere in the document, by any element which is [...] positioned (absolutely or relatively) with a z-index value other than "auto"
So we have two stacking contexts so the menu which is in the header will always be behind the content. Try to set z-indeces to auto (inline). Now we have
body - position: relative
#main
header - position: relative; z-index: auto
.primary_content_tail - position: relative; z-index: auto
footer
And it works as expected in Chrome Canary and Firefox Aurora. If you need the initial z-indeces you might need to create a new layer (stacking context) for the menu.
I actually solved this issue for myself but was wondering if anyone could explain why my fix works. I was styling a popup modal on a mobile site using the MoovWeb SDK and sass. The modal consists of a mask div, which is located immediately inside a container div, and the modal div itself, which was buried more deeply in the DOM.
mask styling:
#modalMask{
opacity: .8;
position: absolute;
display:none;
height:100%;
width: 100%;
z-index:9990;
}
modal styling:
.mw-popup-modal {
top: 80px !important;
left: 0 !important;
position:fixed;
z-index:9999;
display:none;
}
This resulted in the mask sitting on top of the modal and the buttons inside the modal being un-tappable - their tap area was actually located around 3cm below where the button was appearing onscreen on the phone. However, on the desktop version of the site, this styling looked fine.
When I changed the positioning of the modal from "fixed" to "absolute" this fixed the problem, but I'd like to understand why. Do fixed- and absolute-positioned elements each work on their own z-index stack?
Official W3 documentation states
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.
Absolute and Fixed positioning do not work on their own z-index stack context.
The header of my site has a button which, when clicked, should bring up a popup, with a form inside, (just below the button) allowing customers to search the site.
My Jquery code to do this:
<script type='text/javascript'>
$(document).ready(function () {
$('#search-my-size-inner').click(function() {
$('#search-my-size-lightbox').toggle();
$("#search-my-size-lightbox").css("z-index","1000");
});
});
</script>
My div, search-my-size-lightbox, has the following CSS.
.lightbox-search-my-size { color: #673645; opacity: 0.9; filter:alpha(opacity=90); background: #fff; }
#search-my-size-lightbox { position: absolute; width:390px; right: 0; top: 26px; display: none; }
And the div is:
<div id='search-my-size-lightbox' class='lightbox-search-my-size'>my content </div>
This works fine on all browsers except IE7. The 'z-index' is unnecessary since I can do that from CSS, but it was worth a try for IE7 but still did not fix the bug.
The bug is that the div is "hidden" (or blocked) by several other absolute and relative elements below. If I move the div way down to before the "/body" tag, then the div shows. However, I need it up in the code within its parent "relative" tag to position is correctly.
The div shows fine over normal content, it is just that there are some big home page banners below the header, with several relative and absolute divs, which block the popup content. If I remove those "position" attributes, then the popup shows fine, but of course the home page banners' layout is messed up so this is not a solution.
Also, if I change #search-my-size-lightbox to position: relative, then it will work, but this simply pushes content down, and I need an absolute, popup-like div.
The following looks useful but doesn't seem to work for me:
1. Positioning divs with z-Index in Internet Explorer 7
2. http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/
3. IE7 relative/absolute positioning bug with dynamically modified page content
Any advice would be appreciated,
Many thanks!
The problem seems to be related to the stacking context. The z-index property only affects the stacking order of the children in a single parent, not to elements with different parents. See the "Understanding z-index and stacking contexts" section of the YUI Overlay documentation for more information about this.
The problem is menu openning in the wrong place only in firefox. I thought about putting top:2px position:relative but it`ll effect all browsers
http://img707.imageshack.us/img707/6884/unled1copyqj.jpg
my website; http://tinyurl.com/3g58vhb
You are using the position: absolute but do not define a top value. Try using top: x inside your CSS and it should be on the same position on every browser.
If your header can move up and down. Give the parent node of the submenu (LI) the css property position: relative, but still define the top property.
adjust the padding like this :
height: 17px;
padding: 6px 10px;
And add height to your nav li a { class, should work
I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}