xhtml z-index question

Discussion in 'HTML' started by Darren Benfer, Sep 8, 2003.

  1. Does z-index only have an effect on layering, or does it influence the
    actual order that elements are loaded?

    Thanks,
    --
    D Benfer
    Mokee.com
    USWebSales.com
     
    Darren Benfer, Sep 8, 2003
    #1
    1. Advertising

  2. Darren Benfer <> wrote:

    > Does z-index only have an effect on layering, or does it influence the
    > actual order that elements are loaded?


    A few notes:
    - z-index is not an HTML (or XHTML) concept at all; it is pure CSS
    - there is no "layering" concept in CSS except as an informal
    description of the effect of z-index; read what the CSS specifications
    say about z-index, instead of assuming some "layering" idea
    - "loading" of elements could mean different things, and I cannot
    guess which of them you're referring to, and why
    - but if you mean positioning, then the answer is that z-index has
    no effect on it, absolutely or relatively.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Sep 8, 2003
    #2
    1. Advertising

  3. "Jukka K. Korpela" <> wrote in
    news:Xns93F05FA8A21CAjkorpelacstutfi@193.229.0.31:

    > Darren Benfer <> wrote:
    >
    >> Does z-index only have an effect on layering, or does it influence
    >> the actual order that elements are loaded?

    >
    > A few notes:
    > - z-index is not an HTML (or XHTML) concept at all; it is pure CSS


    I never said it was an HTML/XHTML concept...? If you are telling me to
    take this to another usenet group, please let me know if there is one
    specifically covering css - my isp doesn't carry any that I can see.

    > - there is no "layering" concept in CSS except as an informal
    > description of the effect of z-index; read what the CSS
    > specifications say about z-index, instead of assuming some
    > "layering" idea


    I constantly see people referring to z-index and css as a "layering"
    effect. Although if you would rather me use the w3 terms, perhaps
    "stacking" would have been better?

    > - "loading" of elements could mean different things, and I cannot
    > guess which of them you're referring to, and why
    > - but if you mean positioning, then the answer is that z-index has
    > no effect on it, absolutely or relatively.


    What I mean is how the browser draws the elements. If I order them using
    z-index, will the browser draw them in that order. I ask this because of
    image load times. If I could use z-index to bring up the main content
    first, then have my larger image appear it would be nice. Just curious
    about the technique used to draw the page...

    --
    D Benfer
    Mokee.com
    USWebSales.com
     
    Darren Benfer, Sep 8, 2003
    #3
  4. Darren Benfer

    Steve Pugh Guest

    Darren Benfer <> wrote:

    >"Jukka K. Korpela" <> wrote in
    >news:Xns93F05FA8A21CAjkorpelacstutfi@193.229.0.31:
    >
    >> Darren Benfer <> wrote:
    >>
    >>> Does z-index only have an effect on layering, or does it influence
    >>> the actual order that elements are loaded?

    >>
    >> A few notes:
    >> - z-index is not an HTML (or XHTML) concept at all; it is pure CSS

    >
    >I never said it was an HTML/XHTML concept...?


    What do you think the subject line "xhtml z-index question" implies?

    >If you are telling me to
    >take this to another usenet group, please let me know if there is one
    >specifically covering css - my isp doesn't carry any that I can see.


    comp.infosystems.www.authoring.stylesheets is the groupd most focussed
    on CSS.

    >> - "loading" of elements could mean different things, and I cannot
    >> guess which of them you're referring to, and why
    >> - but if you mean positioning, then the answer is that z-index has
    >> no effect on it, absolutely or relatively.

    >
    >What I mean is how the browser draws the elements. If I order them using
    >z-index, will the browser draw them in that order. I ask this because of
    >image load times. If I could use z-index to bring up the main content
    >first, then have my larger image appear it would be nice. Just curious
    >about the technique used to draw the page...


    No. The order in which the browser downloads the elements is not
    affected at all by CSS (assuming that your images are <img> elements
    and not CSS backgrounds).

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Sep 8, 2003
    #4
  5. Steve Pugh <> wrote in
    news:eek::

    >>I never said it was an HTML/XHTML concept...?

    >
    > What do you think the subject line "xhtml z-index question" implies?


    Ahh, ok. Guess I did say that! DOH!

    > comp.infosystems.www.authoring.stylesheets is the groupd most focussed
    > on CSS.


    Thanks, I may have just searched on css but my news server does have
    this!

    >>What I mean is how the browser draws the elements. If I order them
    >>using z-index, will the browser draw them in that order. I ask this
    >>because of image load times. If I could use z-index to bring up the
    >>main content first, then have my larger image appear it would be nice.
    >>Just curious about the technique used to draw the page...

    >
    > No. The order in which the browser downloads the elements is not
    > affected at all by CSS (assuming that your images are <img> elements
    > and not CSS backgrounds).


    Actually, they are css backgrounds. Thanks for the input.

    --
    D Benfer
    Mokee.com
    USWebSales.com
     
    Darren Benfer, Sep 9, 2003
    #5
  6. Darren Benfer

    DU Guest

    Darren Benfer wrote:

    > "Jukka K. Korpela" <> wrote in
    > news:Xns93F05FA8A21CAjkorpelacstutfi@193.229.0.31:
    >
    >
    >>Darren Benfer <> wrote:
    >>
    >>
    >>>Does z-index only have an effect on layering, or does it influence
    >>>the actual order that elements are loaded?

    >>
    >>A few notes:
    >>- z-index is not an HTML (or XHTML) concept at all; it is pure CSS

    >
    >
    > I never said it was an HTML/XHTML concept...?


    Your subject line was suggesting otherwise, misleading.

    If you are telling me to
    > take this to another usenet group, please let me know if there is one
    > specifically covering css - my isp doesn't carry any that I can see.
    >
    >
    >>- there is no "layering" concept in CSS except as an informal
    >> description of the effect of z-index; read what the CSS
    >> specifications say about z-index, instead of assuming some
    >> "layering" idea

    >
    >
    > I constantly see people referring to z-index and css as a "layering"
    > effect.


    Stack level (along the z-axis) of positioned/generated box would be a
    better way to word this.

    Although if you would rather me use the w3 terms, perhaps
    > "stacking" would have been better?
    >
    >
    >>- "loading" of elements could mean different things, and I cannot
    >> guess which of them you're referring to, and why
    >>- but if you mean positioning, then the answer is that z-index has
    >> no effect on it, absolutely or relatively.

    >
    >
    > What I mean is how the browser draws the elements. If I order them using
    > z-index, will the browser draw them in that order. I ask this because of
    > image load times. If I could use z-index to bring up the main content
    > first, then have my larger image appear it would be nice. Just curious
    > about the technique used to draw the page...
    >


    I understand your precise query...but you have to acknowledge here that
    your wording was not optimal. Yes, stacking order is different for
    generated boxes in the same offsetParent node. The last generated
    box/positioned box (in document order) of several generated boxes for
    the same stacking context will have an higher z-index than its previous
    ones. That is what the spec is saying and browsers do comply with this.
    "Boxes with the same stack level in a stacking context are stacked
    bottom-to-top according to document tree order."
    http://www.w3.org/TR/CSS2/visuren.html#q30
    http://www.w3.org/TR/CSS21/visuren.html#z-index

    They may be rendered in a defined order in the last
    redraw/reflow/repaint but they may be also parsed (and needed to be
    parsed first) as the document order too. Document order and document
    display are 2 different issues. Tfoot must appear before Tbody but Tbody
    always is rendered before Tfoot. etc..
    So, you might not save time nor achieve your real goal with abs.
    positioning of your images: you might end up actually to the opposite of
    your intended goal. Creating abs. pos. blocks makes a webpage more
    cmplex, therefore longer to parse, load, render, etc...

    The issue is that you absolutely need to absolutely position your
    images... just to expect (hope for) a controlled webpage-rendering of
    some images first. Your real question should have been how to render
    faster a page and/or images: that should have been your REAL question in
    this newsgroup. You're assuming a solution to an not-defined problem,
    difficulty.

    To speed up rendering of images, I recommend to reduce the quality of
    images, by reducing the number of colors in them: this strategy is
    widely known and widely used. Also, using .png compresses better, more
    efficiently images than .jpg and .gif formats. Also for recent
    Mozilla-based browser versions, using <link type="prefetch" ...> will
    speed up rendering.
    There may be other complementary things to do. We do not see your whole
    webpage situation, context here. It's difficult to figure out what is
    your whole webpage situation.

    Giving an url would have been suitable and highly recommendable.

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Sep 10, 2003
    #6
  7. Darren Benfer

    DU Guest

    Darren Benfer wrote:

    [snipped]

    >
    > What I mean is how the browser draws the elements.


    We have no control and no intimate understanding of how many browsers
    and browser versions draw webpage elements.

    If I order them using
    > z-index, will the browser draw them in that order.


    The final paint/reflow might respect the z-index as intended by the spec
    but by setting z-index for elements implies creating abs. pos. elements;
    you will make your page more complex, therefore longer to parse, render,
    intermediary reflow/repaints needed. etc..

    I ask this because of
    > image load times. If I could use z-index to bring up the main content
    > first, then have my larger image appear it would be nice. Just curious
    > about the technique used to draw the page...
    >


    As far as I can say (and here, I invite anyone to constructively argue
    with me if they think I'm wrong), all browsers render text first; images
    are rendered after. You can even see image placeholders in the page and
    can read the alternate text of images as the images pixels still are not
    processed during webpage parsing and rendering seconds. (One good thing
    to do if you want your images to be rendered as fast as possible is to
    always provide real width and height of images accordingly - in pixels -
    with width and height attributes, otherwise with css). This way, users
    can start to read while images are being painted on the webpages. This
    contribute (is a major factor to) to the subjective time experience of
    users when they compare browser speed and page downloads. Some browsers
    seem faster, more efficient in such strategy than others.

    Some references:
    Graphics and network bandwidth (and the whole chapter on graphics)
    http://www.webstyleguide.com/graphics/bandwidth.html

    Web Site Optimization
    http://www.websiteoptimization.com/

    Webpage size checker
    http://searchengineworld.com/cgi-bin/page_size.cgi

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Sep 10, 2003
    #7
  8. DU <> wrote in
    news:bjnt59$scm$:

    > We have no control and no intimate understanding of how many browsers
    > and browser versions draw webpage elements.
    >
    > If I order them using
    >> z-index, will the browser draw them in that order.

    >
    > The final paint/reflow might respect the z-index as intended by the
    > spec but by setting z-index for elements implies creating abs. pos.
    > elements; you will make your page more complex, therefore longer to
    > parse, render, intermediary reflow/repaints needed. etc..


    Yes, I see this point now. I am learning to view the page as a liquid
    entity rather than a piece of paper with solid boundaries.

    > Some references:
    > Graphics and network bandwidth (and the whole chapter on graphics)
    > http://www.webstyleguide.com/graphics/bandwidth.html
    >
    > Web Site Optimization
    > http://www.websiteoptimization.com/
    >
    > Webpage size checker
    > http://searchengineworld.com/cgi-bin/page_size.cgi
    >


    Very helpful - thanks!

    --
    D Benfer
    Mokee.com
    USWebSales.com
     
    Darren Benfer, Sep 11, 2003
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    7
    Views:
    909
  2. chronos3d
    Replies:
    9
    Views:
    804
    Andy Dingley
    Dec 5, 2006
  3. Usha2009
    Replies:
    0
    Views:
    1,147
    Usha2009
    Dec 20, 2009
  4. xhtml champs
    Replies:
    0
    Views:
    543
    xhtml champs
    Aug 1, 2011
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    323
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page