Anyone know what
position: -ms-page
does?
So far I haven't been able to find any documentation on it, but somehow it fixed an IE specific z-index problem I was having when I added it with position relative. i.e.
position: relative;
position: -ms-page;
Found it by cycling through posible positions in IE11 dev tools.
From the documentation:
Internet Explorer 10. Object is positioned relative to the nearest initial containing block. This may be the viewport or a content container such as an iframe. The positioning properties are used to position the element relative to the boundaries of the viewport area. For more information, see Section 6.4 "Page positioning" of the "W3C CSS Positioned Layout Module Level 3" specification.
"-ms-page" is equivalent to "page".
Related
I am struggling to understand why I need to add position: relative; for a container element when its child element is positioned absolutely (i.e. position: absolute;). Let me explain by example.
Sample HTML Code:
<ul>
<li>...</li>
<li id="parent">
Menu
<div id="child">...</div>
</li>
<li>...</li>
<li>...</li>
</ul>
Consider that the code represents a horizontal menu. Which appears somewhat like this:
The problem is when the value of the position property of #parent is default (i.e. position: static;), its width increases with the width of the #child even though the child element is positioned absolutely, which shouldn't be happening as #child is now out of the flow due to position: absolute;.
Everything falls in place, when I use position: relative; on #parent i.e. its width stays the same, no matter what the size of the #child.
What am I missing here? Why do I need to use position: relative; for something that (I presume) should be the default behavior?
UPDATE: I've created a fiddle to better explain my point. Please take a look.
Steps to reproduce the problem:
In the preview of the fiddle, click on the "Channels" menu, which should slide out its hidden menu-item.
Now, hit F12 key in your browser (Chrome, Safari, or Firefox with Firebug installed), use the inspect tool to inspect the "Channels" menu.
That should immediately point you to the relevant HTML code in the "Elements" tab of the now open Dev Tools or Firebug pane.
Look for the first instance of <li class="float-left top-menu"> inside <ul id="top-navbar"> and hover your mouse over that line. It should show you something like this:
Why is the blue indicator box (i.e. the menu) that big when it should be the size of the red border? Get the idea of what I am saying now?
Now, apply position: relative; on the li (i.e. li.float-left.top-menu { position: relative; } and see the difference for yourself.)
position:relative creates a new containing box from which any absolutely positioned child elements will set their top/left relative to.
position: static will not create a containing box and any child elements that are absolutely positioned will start walking up the DOM tree to find a containing box until it hits the body and use the ancestor it finds for the top/left.
Edit: Sorry I misread your question. I cannot seem to reproduce your description of the problem (see this fiddle). Can you please post the code a minimal test case of your problem.
Okay. I feel stupid now. I was using min-width on the child element, and since the width is pretty much defined, the menu's (i.e. parent's) width expanded as well. Removing min-width cleared all doubts.
And a MUST READ: Absolute Positioning Inside Relative Positioning (also this comment and this answer).
Here's a JSFiddle that breaks uniquely in Internet Explorer 9. I'm hoping someone has seen this and knows how to resolve it.
http://fiddle.jshell.net/se9Kc/1/
Note that the scroll area top edge decoration, or "fader", gets clipped on the right side in IE9.
I understand it's natural to question the use of "fixed" at this point. The full page has an inset scrolling table with an absolutely-positioned header, adjacent to the search criteria. The "fader" is anchored to its non-scrolled (but still fluidly-generated) origin with position: fixed.
The defective algorithm seems to go like this:
correctly generate the visibility mask and content for the fixed element
correctly position the element content as requested
incorrectly position the element visibility mask against the left edge
Help?
After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.
Remove:
position: fixed;
and add somewhere on your page:
<script>
$(.fadeTopGradient).css({'position':'fixed'})
</script>
If you would like accomplish this with css alone, I'm not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9
I hope this helps.
Here's how it looks like in my machine:
If you visit the site and search for something I'm sure you will see this box misaligned because your monitor/resolution might be different than mine.
My question is, how can I position this so it's always under the search box regardless of the width of the monitor?
Add position: relative to #mini-search-wrapper. You can then align the search-results based on the position of the #mini-search-wrapper-element.
position: absolute is bound to the next parent element with a position: relative defined. In this case you did not define a relative position on an element so it's bound to the document-root, which is the html-element.
position: fixed is always bound to the document-root.
The default position in a browser is static.
I hope this helps you understanding how the position-property works in CSS.
As per the title, it seems only Chrome isn't playign along. Note that form fields cannot be clicked on which are on the left portion of the screen. This only occurs on some pages (such as the Contact page). It appears that the #left_outer div is overlaying the content. When I edit the css via Firebug or Chrome's dev toools, it works, when I edit the actual css and refresh, it does not.
Any ideas?
LINK:
Thanks!
Usually when you have set the z-index property, but things aren't working as you might expect, it is related to the position attribute.
In order for z-index to work properly, the element needs to be "positioned". This means that it must have the position attribute set to one of absolute, relative, or fixed.
Note that your element will also be positioned relative to the first ancestor that is positioned if you use position: absolute and top, left, right, bottom, etc.
Without a link to look at, it's a bit tough to see what the problem might be.
Do you have a z-index: -1; anywhere (a negative number is the key here, doesn't matter the number)?
I have found in the past this renders the container void from being interacted with.
Good luck!
Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.
Chrome's specific issue are usually related to the overflow property from the top container bottom.
So, for the following:
<div class="first-container">...</div>
<div class="second-container">
<div ...>
<div class="fixed-div> some text</div>
<... /div>
</div>
And styles:
.first-container {
position:relative;
z-index: 100;
width: 100%;
height: 10%;
}
.second-container {
position:relative;
z-index: 1000;
width: 100%;
height: 90%;
overflow: auto;
}
.fixed-div {
position: fixed;
z-index: 10000;
height: 110%;
}
the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behind the 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.
The reason for this is Chrome always enforce boundaries within a container that enforces overflow even though one of its successors might have a fixed position.
I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...
I had a weird issue with zIndex on Chrome and I kept fiddling with the position attribute to see if anything worked. But, it didn't. Turns out, in my case, the issue was with the transform attribute. So, if you have a transform attribute in place, disable it and it should be fine. Other browsers work fine with stuff like that, but Chrome seems to play it differently.
Hope this helped you.
Google Chrome to 84.0.4147.135 (Official Build) (64-bit) 2020-02-22.
Since my last update, CSS element z-index is broken in Chrome.
Chrome added "z-index: 1;" to the BODY element.
It now wrongly displays all z-index: ?; values in the BODY child elements.
Setting the position, z-index of BODY does not solve the problem.
Changing z-index values of child elements that were already correct does not help.
I hope this issue will be fixed, it is only broken since I updated Chrome.
Chrome 84.0.4147.135 bug on www.eatme.pro/music - screen smaller than 500 px - push play - appearing bottom bar #lblBottomBarLink with z-index 5 is displayed under menu with z-index 2
(see image)
image eatme.pro/music in Chrome 84.0.4147.135 with z-index 5 under z-index 2
I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:
<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>
<script language="javascript" type="text/javascript">
function clientShown(ctl, args) {
ctl._completionListElement.style.zIndex = 99999;
}
</script>
http://madisonlane.businesscatalyst.com
I'm trying to get the div#sign-post to sit above the div#bottom. This works fine in all browsers except IE6 & IE7. Can anyone see what the problem is here?
Also IE6 is displaying an additional 198px to the top of div#bottom.
Most of the answers here are wrong; some work, but not for the reason they state. Here is some explanation.
This is how z-index should work according to the spec:
you can give a z-index value to any element; if you don't, it defaults to auto
positioned elements (that is, elements with a position attribute different from the default static) with a z-index different from auto create a new stacking context. Stacking contexts are the "units" of overlapping; one stacking context is either completely above the another (that is, every element of the first is above any element of the second) or completely below it.
inside the same stacking context, the stack level of the elements is compared. Elements with an explicit z-index value have that value as a stack level, other elements inherit from their parents. The element with the higher stack level is displayed on top. When two elements have the same stack level, generally the one which is later in the DOM tree is painted on top. (More complicated rules apply if they have a different position attribute.)
In other words, when two elements have z-index set, in order to decide which will show on top, you need to check if they have any positioned parents which also have z-index set. If they don't, or the parents are common, the one with the higher z-index wins. If they do, you need to compare the parents, and the z-index of the children is irrelevant.
So the z-index decides how the element is placed compared to other children of its "stacking parent" (the closest ancestor with a z-index set and a position of relative, absolute or fixed), but it doesn't matter when comparing to other elements; it is the stacking parent's z-index (or possibly the z-index of the stacking parent's stacking parent, et cetera) which counts. In a typical document where you use z-index only on a few elements like dropdown menus and popups, none of which contains the other, the stacking parent of all the elements which have a z-index is the whole document, and you can usually get away with thinking of the z-index as a global, document-level ordering.
The fundamental difference with IE6/7 is that positioned elements start new stacking contexts, whether they have z-index set or not. Since the elements which you would instinctively assign z-index values to are typically absolutely positioned and have a relatively positioned parent or close ancestor, this will mean that your z-index-ed elements won't be compared at all, instead their positioned ancestors will - and since those have no z-index set, document order will prevail.
As a workaround, you need to find out which ancestors are actually compared, and assign some z-index to them to restore the order you want (which will usually be reverse document order). Usually this is done by javascript - for a dropdown menu, you can walk through the menu containers or parent menu items, and assign them a z-index of 1000, 999, 998 and so on. Another method: when a popup or dropdown menu becomes visible, find all its relatively positioned ancestors, and give them an on-top class which has a very high z-index; when it becomes invisible again, remove the classes.
Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:
1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body
if this is not feasible then
2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have a position:relative. Try applying that property to #bottom and #body (or #signpost)
let me know how that works out
Darko
I just had this problem and the fix I found (thanks to Quirksmode) was to give the direct parent of the node you are trying to set a z-index of it's own z-index that is at less than the z-index of the node you are trying to set. Here is a quick example that should work in IE6
<html>
<head>
<style type="text/css">
#AlwaysOnTop {
background-color: red;
color: white;
width: 300px;
position: fixed;
top: 0;
z-index: 2;
}
#Header {
color: white;
width: 100%;
text-align: center;
z-index: 1;
}
</style>
</head>
<body>
<div id="Header">
<div id="AlwaysOnTop">This will always be on top</div>
</div>
<div id="Content">Some long amount of text to produce a scroll bar</div>
</body>
</html>
Welcome, I solved the problem with:
.header {
position: relative;
z-index: 1001;
}
.content {
position: relative;
z-index: 1000;
}
Looks to me like you have some malformed HTML in there. I tried counting, and perhaps I lost count of the opening and closing tags, but it looks like div#container isn't closed. Try running your page through a validator (such as W3C's HTML Validator, or something) and fixing some of the errors. That's helped me with these sorts of problems in the past. Good luck!
I've recently had an ongoing problem displaying one layer above another. In my case I was programmatically creating two layers in Javascript, one for diaplaying a custom control and one for creating a full screen layer behind it. FF was fine, bu IE displayed the full screen layer always on top of everything else.
After numerous trawls over the interweb, trying everyone's suggestions, the only way I eventually get it working was to remove position: attributes from both layers, and tweak the margin-top: attribute until I got a satisfactory result.
A bit of a hash, but it works and it'll be fine until IE 8 sorts out all of the current bugs......
the only reliable solution is, to put the top elements below in the code and then push them over the other stuff with absolute positioning.
e.g. Wordpress:
put the navigation in the footer file, but still inside the page wrapper.
might also bring some advantages for search engines, because they can directly start with the content, without crawling through the menu first...
UPDATE:
I need to correct myself. While putting the element below and then pushing it over is still the easiest way, there are certain cases when this is not possible in reasonable time. Then you have to make sure that each and every parent element has some kind of positioning and some senseful z-index. Then the z-index should work again even in IE7.