Live data from Hacker News

What No One Told You About Z-Index

philipwalton.com

41–50 of 100 posts

Re: What No One Told You About Z-Index

#41

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

Quality rant :)

Re: What No One Told You About Z-Index

#42

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

Does anyone have any insight as to why it is this way? To me it seems insane, but I don't trust my own judgement in domains like this because I've never built anything comparable. Are there really good reasons for CSS to be the way it is?

I don't have a reference for this, but I always got the impression that CSS was intentionally limited to help browsers implementers write efficient layout engines with as few pathological cases as possible. For instance, if you could specify the value of object attributes using arbitrary expressions with other objects' attributes as input, it would be very easy to have circular dependencies, unexpectedly high computational costs, contradictions, and so on. Just defining how to solve a contradiction would have made the standard much more complex, and error reporting would have been a nightmare.

Re: What No One Told You About Z-Index

#43

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

The only argument in favor of CSS not being the most horrible thing ever invented is that as far as I know, nobody has come up with a better alternative yet…

Reminds me of this Foxtrot comic: (second comic on the page) http://books.google.com/books?id=SEbwki1N0goC&pg=PA103

Re: What No One Told You About Z-Index

#44
post #12

To solve the issue of z-index only working on positioned elements, what I do on all new projects is set the following: * { position:relative; } This does two things. Allows me to set z-index values without hassle, and also allows me to set top/bottom left/right values. Refer to my GitHub repo for the code for my base structure for new projects. https://github.com/garand/base

This does _three_ things: third is severely slows down page rendering .

I used to think that as well, but after much research and using it on multiple projects I find that not to be the case.

Re: What No One Told You About Z-Index

#45

Earlier quoted context omitted.

This does _three_ things: third is severely slows down page rendering .

I can't find any information about `position:relative` impacting page render performance. Please share. Given my experience of low impact on render performance of vanilla properties like this (transitions are a whole 'nother story), I'm much more concerned with whether this is of benefit to developer happiness. You'll never be able to use `position:absolute` for anything outside of the context of an element's parent,…

position:relative is probably not that expensive, but the '*' causes very negative impact - the browser will scan the whole tree trying to match the rules every time the DOM changes.

http://minus.com/lyJrZzYj4bSoH

Re: What No One Told You About Z-Index

#46
Long text for just a few explanation. As a developer I hate reading those kind of tips since it doesn't go straight to the point. Here's my tl;dr :

> the stacking order is the same as the order of appearance in the HTML

Actually this is false, as last in code is displayed on top

> When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements

Use a "position:" and it will go on top of div not using it.

> z-index only works on positioned elements

use "position:" to use "z-index" otherwise it won't work.

> ...

I felt like the rest was unnecessary unless you plan to play a lot with z-index. Then you can get a better tutorial/article/documentation on it.

Re: What No One Told You About Z-Index

#47
post #44

Earlier quoted context omitted.

This does _three_ things: third is severely slows down page rendering .

I used to think that as well, but after much research and using it on multiple projects I find that not to be the case.

It's a fact; look at this profile data for a simple test: http://minus.com/lyJrZzYj4bSoH

The '*' selector shoots up the chart, and for some reason the browser lays down a lot more rules then when it's absent. 2ms is not much, but when complexity increases it all adds up (games, client-side apps, etc).

Re: What No One Told You About Z-Index

#48

Earlier quoted context omitted.

This does _three_ things: third is severely slows down page rendering .

I can't find any information about `position:relative` impacting page render performance. Please share. Given my experience of low impact on render performance of vanilla properties like this (transitions are a whole 'nother story), I'm much more concerned with whether this is of benefit to developer happiness. You'll never be able to use `position:absolute` for anything outside of the context of an element's parent,…

  You'll never be able to use `position:absolute` for anything outside of the context of an element's parent.
While true, I find that the instances that I need something to be absolutely positioned outside of it's context are few and far between. Also, it is quite easy to set position static on the parent elements.

  Every new developer will need to wrap their head around nonstandard page flow
I work with a team that is on board with this, so it hasn't been an issue yet.

Also, refer to this: http://css-tricks.com/things-it-might-be-funuseful-to-try-th...

Re: What No One Told You About Z-Index

#49

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

Does anyone have any insight as to why it is this way? To me it seems insane, but I don't trust my own judgement in domains like this because I've never built anything comparable. Are there really good reasons for CSS to be the way it is?

Let's clarify the question.

"Does anyone have any insight as to why vertical centering of dynamic-height content is the way it is?"

Yes. The original standards committee created a layout model (block, inline, and inline-block elements) that (they felt) adequately balanced language complexity with features. It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/

"Does anyone have any insight as to why people that code CSS complain about it so much?"

This is a much deeper question, but one that I think is far more informative. Having done front-end engineering for 10 years, across industries, and in very pricey and exclusive consultancies, I have never found another engineer who had read the bulk of the CSS spec, or even a book about it, for that matter.

Developers, the ones with the mind and experience to bring technical discipline to CSS and create a set of idiomatic patterns (both low-level and high-level), treat CSS as a second-rate citizen. The bulk of the rest of the CSS userbase consists of visual design types (coming from print or graphic design), where the tools of the trade are physical pen and paper, or something from Adobe Creative Suite. The remaining portion of the userbase are equally non-technical hobbyists.

This is the real problem of CSS. Those that have the mindset to devise idiomatic conventions to the community don't think the language is worth it. At best, you have semi-experienced developers duct-taping various non-idiomatic ideas together and giving it a fancy name.

Re: What No One Told You About Z-Index

#50
post #44

Earlier quoted context omitted.

I used to think that as well, but after much research and using it on multiple projects I find that not to be the case.

It's a fact; look at this profile data for a simple test: http://minus.com/lyJrZzYj4bSoH The '*' selector shoots up the chart, and for some reason the browser lays down a lot more rules then when it's absent. 2ms is not much, but when complexity increases it all adds up (games, client-side apps, etc).

Take a look at this.

http://paulirish.com/2012/box-sizing-border-box-ftw/

Specifically the Performance section.

Post reply on HN