Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What No One Told You About Z-Index

philipwalton.com

Post reply on HN
Print view View original

51–60 of 100 posts

Re: What No One Told You About Z-Index

#51

Post by garand »

crescentfresh wrote: post #13
garand wrote: 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

Do you use tables at all? What effect does this have on cells, rows, etc?

I haven't worked with tables and this much, so I can't speak for that.

Re: What No One Told You About Z-Index

#52

Post by spyder »

moultano wrote: post #32
eranation wrote: post #31

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?

Because we used to do these things with tables but tables aren't cool enough since the "War on tables" (because tables aren't the right way to do layouts) and nothing better has been available. Hopefully CSS3 will fix these things.

Re: What No One Told You About Z-Index

#53

Post by sandGorgon »

mcgwiz wrote: post #49
moultano wrote: post #32

Earlier quoted context omitted.

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 insig…

genuine question as a non front end engineer- do you recommend reading the CSS spec as a reference guide? im basically asking whether someone learning to be good in CSS should read the spec or pick up one of the recommended books (that appear from time to time on HN).

For example, i never had to read the spec for ruby to get jruby to work.

Re: What No One Told You About Z-Index

#54

Post by aroman »

recursive wrote: post #26
aroman wrote: post #11

Earlier quoted context omitted.

I don't really want to add to the dogpile of comments explaining why you missed the point, but the blog post pretty clearly states what the criteria for the "challenge" were: "Here's the challenge: try to see if you can make the red element stack behind the blue and green elements without breaking any of the following rules: Do not alter the HTML markup in any way. Do not add/change the z-index property of any elemen…

He didn't change the markup. He changed the CSS. He didn't add a property to an element. He added a property to a rule.

Yeah I'm really not sure what you're trying to say. He explictly set the z-index on the elements by editing the CSS. It wasn't the inherent act of editing the CSS that was the violation -- explicitly setting the z-index was.

Re: What No One Told You About Z-Index

#56

Post by timb »

mcgwiz wrote: post #49
moultano wrote: post #32

Earlier quoted context omitted.

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 insig…

"It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ "

that solution

1. only works for text, which is part of eranation's rant.

2. only works if you know the exact height of the container.

3. isn't even centered: http://i.imgur.com/lz8Mq.png

Re: What No One Told You About Z-Index

#57

Post by ricardobeat »

garand wrote: post #50
ricardobeat wrote: post #47

Earlier quoted context omitted.

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.

I've read that, his argument is that "it's negligible", not that it doesn't have an impact. In his anedoctal evidence link it's adding 15-30ms to render times.

Add a couple * selectors - one in the reset, one more in your base sheet - plus a couple descendant * selectors, global box-sizing/position rules and you've put a heavy saddle on the matching and rendering engine. It might not matter for 80% of websites, but you need to be aware of it.

Re: What No One Told You About Z-Index

#58

Post by [deleted] »

garand wrote: post #50
ricardobeat wrote: post #47

Earlier quoted context omitted.

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.

[deleted]

Re: What No One Told You About Z-Index

#59

Post by Arelius »

sandGorgon wrote: post #53
mcgwiz wrote: post #49

Earlier quoted context omitted.

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 insig…

genuine question as a non front end engineer- do you recommend reading the CSS spec as a reference guide? im basically asking whether someone learning to be good in CSS should read the spec or pick up one of the recommended books (that appear from time to time on HN). For example, i never had to read the spec for ruby to get jruby to work.

Does ruby even have a proper spec?

Re: What No One Told You About Z-Index

#60

Post by Arelius »

Camillo wrote: post #42
moultano wrote: post #32

Earlier quoted context omitted.

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 computa…

I think that while that may have originally been the case, I feel that we've long since passed the point of particularly efficient layout engines with as few pathological cases as possible. Particularly computational costs, since I think you'll find many sites doing some part of layout in javascript.
Post reply on HN