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.
Related
I'm working in a design and I need to overlay one section over other keeping a curve like this
Design
So I've created two sections first (blue) and second (gray), and looks like this
Pre CSS
I am using the property translateY to raise the second section but it covers the first, and I lose the curve
post Css
I've tried using property z-index, but it seems not work, I' dont want to use property position: absolute/relative, beacuse are different sections. Any one comes with something?
I've tried using property z-index, but it seems not work
To have z-index work for you, position property must not be static. As stated in W3Schools:
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
I couldn't check as you didn't provide a fiddle, was your CSS for the sections have a position like this?
.section-1 { position: relative; z-index:1; }
.section-2 { position: relative; z-index:2; }
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.
So I'm creating a new layout for my blog, www.thatgirlmag.com, and I want a fixed navigation bar at the top (which goes with you when you scroll down). I've written the CSS right (I think), but now I can't see it because it's behind the bar that shows up when you're logged in to wordpress. I could just move it down, but then viewers who AREN'T logged in to wordpress will see something weird, right? It looks weird when I view it from an incognito window.
I'm assuming there has to be a better way to do this. I just want the navigation bar to sit right at the top of the VISIBLE portion of my blog. Help?
Here's the CSS we're looking at
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}
Also, I have the bar positioned at -10 and 110% wide because I want it to go 100% across the page (and setting width: 100% makes the nav bar just go across the width of the element, which has margins). There must be a better way to do that as well. Can someone help me? I'm not sure I'm explaining this right.
What you're dealing with is called z-index. You need to add a z-index value to a positioned object - like #main-nav - to place it in visibility context with other objects with or without z-index values and positions.
Briefly (from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index )
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Take a look at other answers to z-index questions on SO: https://stackoverflow.com/search?q=z-index And see Understanding z-index and The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine
For the WordPress admin bar specifically: move it down (only for logged in admins) to account for not being able to override the 9999 z-index value in WP core CSS by targeting the admin-bar div:
body.admin-bar .header {
position:fixed;
top: 28px;
z-index: 1000;
height: 40px;
}
See http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/
Try adding a z-index to to main-nav. It would look something like this:
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}
I used a large number for z-index because wordpress might give a z-index to the div on top of that.
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.