By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,591 Members | 650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,591 IT Pros & Developers. It's quick & easy.

z-index not positioning properly?

P: n/a
Perhaps someone else can learn from my mistake.

As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.

What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.

<div id="outer" style="position: absolute; top: 10; left: 0;
z-index: 1">
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
<p>You may think this would be on top...</p>
</div>
***
</div>

<div id="biltong" style="position: absolute; top: 10; left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>

In this example, the "inner" div's z-index of 2 only places it above
any other div's you may define within the "outer" div (where the ***
are). It's not placed above the "biltong" div, because the latter
shares the same z-index as the "inner" div's parent.

If you want the contents of the "inner" layer to be on top of
everything else, its parent div "outer" needs to have a higher z-index
than the other layers.

Practical application: drop-down menu's that should appear above other
layers.

Nov 1 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
<ra*****@gmail.comwrote:
What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.
It is "spelled out" explicitly. Just read the CSS specification
carefully, especially the section about the "stacking context":

<http://www.w3.org/TR/CSS21/visuren.html#z-index>

<div id="outer" style="position: absolute; top: 10; left: 0;
Please note that "top:10;" is invalid CSS code. Browser only accept this
in Quirks mode and will ingore this in standards compliant mode.

So you should correct this: "top: 10px;"

--
Alexander
Nov 1 '06 #2

P: n/a

<ra*****@gmail.comwrote in message
news:11**********************@b28g2000cwb.googlegr oups.com...
Perhaps someone else can learn from my mistake.

As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.

What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.

<div id="outer" style="position: absolute; top: 10; left: 0;
z-index: 1">
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
<p>You may think this would be on top...</p>
</div>
***
</div>

<div id="biltong" style="position: absolute; top: 10; left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>

In this example, the "inner" div's z-index of 2 only places it above
any other div's you may define within the "outer" div (where the ***
are). It's not placed above the "biltong" div, because the latter
shares the same z-index as the "inner" div's parent.

If you want the contents of the "inner" layer to be on top of
everything else, its parent div "outer" needs to have a higher z-index
than the other layers.

Practical application: drop-down menu's that should appear above other
layers.
In my understanding, there can only be one z-index 1.
That would be the one last implied, so your "But this is on top" would be
naturally.
In the second division, try the zindex 1 as a -1 rather than a +1 and see
what happens.

Nov 1 '06 #3

P: n/a
richard wrote:
>
In my understanding, there can only be one z-index 1.
Your understanding, as usual, is incorrect.

--
Berg
Nov 1 '06 #4

P: n/a
ra*****@gmail.com wrote:
>
As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.
You've overlooked position:relative

--
Berg
Nov 1 '06 #5

P: n/a
ra*****@gmail.com wrote :
Perhaps someone else can learn from my mistake.

As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.

What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.
They are z-index-ed above the parent by default and this is covered by
the spec.
>
<div id="outer" style="position: absolute; top: 10;
Right here, you have a CSS parsing error: length values must have an unit.

CSS 1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C
standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors
left: 0;
z-index: 1">
Defining z-index: 1 is required if there are other DHTML layers around,
otherwise, it takes the auto value.
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
There is no need to define a z-index here.
<p>You may think this would be on top...</p>
</div>
***
</div>

<div id="biltong" style="position: absolute; top: 10;

10 will be parsed and then will be ignored.

left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>
Gérard
--
remove blah to email me
Nov 1 '06 #6

P: n/a
rh
<ra*****@gmail.comwrote
Perhaps someone else can learn from my mistake.

As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.
Really?

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

"Other stacking contexts are generated by any positioned element (including
relatively positioned elements) having a computed value of 'z-index' other
than 'auto'."
What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.
Again, not true. RTM
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
>
<div id="outer" style="position: absolute; top: 10; left: 0;
z-index: 1">
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
<p>You may think this would be on top...</p>
</div>
***
</div>

<div id="biltong" style="position: absolute; top: 10; left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>

In this example, the "inner" div's z-index of 2 only places it above
any other div's you may define within the "outer" div (where the ***
are).
not just divs, but anything in the outer (parent) div in this case.
>It's not placed above the "biltong" div, because the latter
shares the same z-index as the "inner" div's parent.
No, it shares the same -stacking context <- because you set a z-index in
the "outer" div.

Did you try not setting a z-index on the outer div?

RTM -z-indext "stacking context"
If you want the contents of the "inner" layer to be on top of
everything else, its parent div "outer" needs to have a higher z-index
than the other layers.
Yes, if you've set a stacking context by setting a z-index on the parent
div. That's how it's supposed to work.

<div id="outer" style="width:300px;position: absolute; top: 0; left: 0;
background-color:red">
<div id="inner" style="width:200px;position: absolute; top: 15px;
left: 15px; z-index: 2; background-color:lime">
<p>You may think this would be on top...(it is now)</p>
</div>
This is the parent of inner with no z-index.
</div>
<div id="biltong" style="width:100px;height:200px;position: absolute;
top: 10px; left: 10px; z-index: 1; background-color:yellow">
<p>...but this is actually on top (not).</p>
</div>

RTM,RTM,RTM

Rich
Nov 1 '06 #7

P: n/a
Yes, the "px" unit suffix was left off accidentally.

As for z-index itself: if anyone is confused about it, don't read my
first example. Find another.

I think it would be in the W3C's best interest (and undeniably also my
own) for them to create a XHTML/CSS/whatever reference site of their
own, one that:
- is concise enough to make finding the element/property/etc being
looked up easy
- is capable of expanding upon basic concepts with more details such as
examples, browser compatibility, known workarounds, etc.

Feel free to post any links to ref sites you use; my point is, the W3C
drafted this, why not spoil us with more tools?

On Nov 1, 7:08 pm, "rh" <disposable12...@cableone.netwrote:
<ravi...@gmail.comwrote
Perhaps someone else can learn from my mistake.
As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.Really?

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

"Other stacking contexts are generated by any positioned element (including
relatively positioned elements) having a computed value of 'z-index' other
than 'auto'."
What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.Again, not true. RTMhttp://www.w3.org/TR/CSS21/visuren.html#propdef-z-index


<div id="outer" style="position: absolute; top: 10; left: 0;
z-index: 1">
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
<p>You may think this would be on top...</p>
</div>
***
</div>
<div id="biltong" style="position: absolute; top: 10; left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>
In this example, the "inner" div's z-index of 2 only places it above
any other div's you may define within the "outer" div (where the ***
are).not just divs, but anything in the outer (parent) div in this case.
It's not placed above the "biltong" div, because the latter
shares the same z-index as the "inner" div's parent. No, it shares the same -stacking context <- because you set a z-index in
the "outer" div.

Did you try not setting a z-index on the outer div?

RTM -z-indext "stacking context"
If you want the contents of the "inner" layer to be on top of
everything else, its parent div "outer" needs to have a higher z-index
than the other layers.Yes, if you've set a stacking context by setting a z-index on the parent
div. That's how it's supposed to work.

<div id="outer" style="width:300px;position: absolute; top: 0; left: 0;
background-color:red">
<div id="inner" style="width:200px;position: absolute; top: 15px;
left: 15px; z-index: 2; background-color:lime">
<p>You may think this would be on top...(it is now)</p>
</div>
This is the parent of inner with no z-index.
</div>
<div id="biltong" style="width:100px;height:200px;position: absolute;
top: 10px; left: 10px; z-index: 1; background-color:yellow">
<p>...but this is actually on top (not).</p>
</div>

RTM,RTM,RTM

Rich
Nov 13 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.