xhtml z-index question

D

Darren Benfer

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

Thanks,
 
J

Jukka K. Korpela

Darren Benfer said:
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.
 
D

Darren Benfer

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...
 
S

Steve Pugh

Darren Benfer said:
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.
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
 
D

Darren Benfer

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!
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

DU

Darren said:
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.




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?




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
 
D

DU

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
 
D

Darren Benfer

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

If I order them using

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!
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top