Hi

How can I make a div (position relative) topmost? I tried the z-index,
but no matter how I set it, some portion of the div is always covered.

Any tips or suggestions? Thanks in advance.

Regards
Warren

On 2008-09-17, Warren Tang wrote:
> Hi
>
> How can I make a div (position relative) topmost? I tried the z-index,
> but no matter how I set it, some portion of the div is always covered.

Don't position other elements over it.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

On 2008-09-17, Warren Tang <warren_tang@sina.com> wrote:
> Hi
>
> How can I make a div (position relative) topmost? I tried the z-index,
> but no matter how I set it, some portion of the div is always covered.

It must be then that the div is covered by its own descendents.

> Any tips or suggestions? Thanks in advance.

When you set z-index on a div it does two things: moves the div itself
in its stacking context (i.e. puts it behind or in front of some other
elements), and starts a new stacking context inside the div for its own
descendents.

Because it starts that new stacking context whatever you do with z-index
on its descendents is limited to rearranging them among themselves. None
of them can be made to jump lower in the stack that the original div nor
higher than the next thing in front of it in its stacking context.

You will have the finest control if you set z-index on elements nearest
to the leaves of the document tree. That way you can keep all the
elements you're interested in rearranging in the same stacking context
as each other and all the little nested stacking contexts you create
have little or nothing in them.

So you might be better not to set z-index on the div itself, but instead
to set negative z-indices on the things that are on top of it to move
them behind it.

Warren Tang schrieb:

> How can I make a div (position relative) topmost? I tried the z-index,
> but no matter how I set it, some portion of the div is always covered.

By plugin content like flash?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

In article <48d20448$0$13388$6e1ede2f@read.cnntp.org>,
Johannes Koch <koch@w3development.de> wrote:

> Warren Tang schrieb:
>
> > How can I make a div (position relative) topmost? I tried the z-index,
> > but no matter how I set it, some portion of the div is always covered.
>
> By plugin content like flash?

Don't even think about it. Ben C gave an excellent answer.

--
dorayme

dorayme wrote:
> In article <48d20448$0$13388$6e1ede2f@read.cnntp.org>,
> Johannes Koch <koch@w3development.de> wrote:
>
>
>>Warren Tang schrieb:
>>
>>
>>>How can I make a div (position relative) topmost? I tried the z-index,
>>>but no matter how I set it, some portion of the div is always covered.
>>
>>By plugin content like flash?
>
> Don't even think about it.

That was maybe not a solution, but a reason.

- Daniel

Unfortunately, it was covered by other divs created by myself.

Daniel Jung wrote:
> dorayme wrote:
>> In article <48d20448$0$13388$6e1ede2f@read.cnntp.org>,
>> Johannes Koch <koch@w3development.de> wrote:
>>
>>
>>> Warren Tang schrieb:
>>>
>>>
>>>> How can I make a div (position relative) topmost? I tried the
>>>> z-index, but no matter how I set it, some portion of the div is
>>>> always covered.
>>>
>>> By plugin content like flash?
>>
>> Don't even think about it.
>
> That was maybe not a solution, but a reason.
>
> - Daniel

Hi Ben

Thank you! I am trying to understand the "stacking context".

Regards
Warren

Ben C wrote:
> On 2008-09-17, Warren Tang <warren_tang@sina.com> wrote:
>> Hi
>>
>> How can I make a div (position relative) topmost? I tried the z-index,
>> but no matter how I set it, some portion of the div is always covered.
>
> It must be then that the div is covered by its own descendents.
>
>> Any tips or suggestions? Thanks in advance.
>
> When you set z-index on a div it does two things: moves the div itself
> in its stacking context (i.e. puts it behind or in front of some other
> elements), and starts a new stacking context inside the div for its own
> descendents.
>
> Because it starts that new stacking context whatever you do with z-index
> on its descendents is limited to rearranging them among themselves. None
> of them can be made to jump lower in the stack that the original div nor
> higher than the next thing in front of it in its stacking context.
>
> You will have the finest control if you set z-index on elements nearest
> to the leaves of the document tree. That way you can keep all the
> elements you're interested in rearranging in the same stacking context
> as each other and all the little nested stacking contexts you create
> have little or nothing in them.
>
> So you might be better not to set z-index on the div itself, but instead
> to set negative z-indices on the things that are on top of it to move
> them behind it.

Warren Tang wrote:
> Unfortunately, it was covered by other divs created by myself.

we are still waiting for a url.

- Daniel

On 2008-09-18, Warren Tang <warren_tang@sina.com> wrote:
> Hi Ben
>
> Thank you! I am trying to understand the "stacking context".

Consider this document:

<html>
<body>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<blockquote>
<p><em></em></p>
</blockquote>
</body>
</html>


It gets rendered in this order, from back to front:

(Viewport, Canvas, BODY, DIV, UL, LI, LI, BLOCKQUOTE, P, EM)

Everything is in one stacking context, represented by (). This is called
the "root stacking context".

Suppose you put z-index:1 on the div, then you first create a new
stacking context:

(Viewport, Canvas, BODY, (DIV, UL, LI, LI), BLOCKQUOTE, P, EM)

Then, because it was z-index:1, that stacking context goes right to the
front of the stacking context it is in, so the page is rendered like
this:

(Viewport, Canvas, BODY, BLOCKQUOTE, P, EM, (DIV, UL, LI, LI))

The whole stacking context moves together. Now what happens if I set
z-index: -1 on the second LI?

A new stacking context around the LI:

(Viewport, Canvas, BODY, BLOCKQUOTE, P, EM, (DIV, UL, LI, (LI)))

And then it goes right to the back of the stacking context it's in
(which is the first thing inside the DIV):

(Viewport, Canvas, BODY, BLOCKQUOTE, P, EM, (DIV, (LI), UL, LI))

So that LI has moved back only two places in the stack. If I set
z-index: -1000 on it, it will still move back only two places. It can't
jump out of its stacking context. It can never get behind the DIV.

What if I want to get that LI behind the BLOCKQUOTE? I can only do that
if the LI and the BLOCKQUOTE are in the same stacking context. As soon
as I set z-index: 1 on the DIV, I broke that requirement.