z-index on fixed header not working - html

I have tried to replicate the issue in this plunker.
.demo-blog.mdl-layout .mdl-layout__content {
padding-top: 0px;
position: relative;
margin-top: -80px;
z-index: 100;
}
header.main-header{
z-index: -50;
}
I want the div that says "on the road again" to be on top of the header that says "evolution update". I have tried changing the parent's z-index, changing each related unit's z-index, wrap header within a div tag, and yet nothing works. The "on the road again" div is still beneath the header.
What is I want is this.
Thanks a lot in advance.

Used to z-index with position without position this is not working.
The z-index property specifies the stack order of an element.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

A solution to this problem is you need to add margin-top: -60px; to .demo-blog

Related

Can't position a div above other docs?

I am trying to position a div above others through absolute positioning. But the div is still under an AdSense ad. My website is located at http://tinyurl.com/q3uwbf3. Try out the div by clicking on login on top-right corner.
Increase/Add the z-index property, will fix the issue. On inspecting using developer tools I fixed it
#loginmenu {
z-index: 99;
}
Your issue has to do with Z-INDEX.
Make sure you set it higher than the element that is hiding your DIV. Think of Z-INDEX as possible layers on top of each other.
#loginmenu {
z-index:999;
}
Might be a problem with the z-index, which basically determines what's in front and what's in the back.
Take a look at this: http://www.echoecho.com/csslayers.htm
give z-index 1; in the style tagg or css
#loginmenu {
z-index: 1;
}
<div style="display: block; z-index: 1;" id="loginmenu">
</div>
Any element with higher z index comes upper

CSS: Dropdown menu gets hidden behind the content

Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}

Why does the menu appear in Chrome and FireFox, but not IE?

Why does the top category menu (Everything, Ballet Flats, Boots, etc) - div id="header-bar" - look great in FireFox and Chrome, but be hidden in IE unless you scroll down the page?
http://shoeporn.com
Any help will be much appreciated :)
It's positioned underneath (behind) the top bar. Either change the z-index to something bigger than the top bar, or change the top to position it below the top bar.
Its hidden in chrome as well. The z-index is lower than the one of the background or something.
Anyway add something like this to your header-nav:
z-index: 130;
I find setting position:absolute on #header-bar in this particular example to be poor practice. Consider changing that to
#header-bar {
position: relative;
/*left: 0;
right: 0;
top: 44px; - remove these*/
}
This will maintain natural document flow; position:relative allows for dropdown positioning and maintaining rendering context (compare with removing position property altogether and see the dropdown menus going "behind" the shoe tiles)
Rule of thumb: avoid absolute positioning if you can build without it.
For me its hidden in chrome too... anyway change this in css:
#header-bar {
top: 84px;
z-index: 105;
}
remove z-index from #header-wrapper and add z-index:106 to #header-nav.
Hope it will help...

using css -top value to move a div position

Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative

left:50% element not appearing in middle of page

I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.