 |
 |
||
How can I make a div topmost?
|
||
|
Welcome to the CSS & Stylesheet Forums forums. You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so please, join our community today! If you have any problems with the registration process or your account login, please contact contact us. |
| Tags: |
 |
09-23-2008, 01:42 AM
|
|||
|
|||
Re: How can I make a div topmost?
Hi Ben
Your comments are definitely helpful! Now I have a better understanding of what's going on, and I'm ready to tackle this kind of problems. Regards Warren Ben C wrote: > 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. 
|
| Sponsored Links |
|
| Thread Tools | Search this Thread |
| Display Modes | |
|
|
- Contact Us
-|-
CSS & Stylesheet Forums -|-
Archive -|-
Top -|-Rules/Disclaimer-|-Help/Support-|-Advertise
Linear Mode
