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

71–80 of 100 posts

Re: What No One Told You About Z-Index

#71

Post by robin_reala »

No1 wrote: post #66
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…

Well put rant. 16 years after CSS was released unto the world, and it still lacks a decent way to center content. Makes me lose all faith in the W3C.

No it doesn’t: http://www.w3.org/TR/css3-flexbox/. To whit:

  
    
  
  
  #container {
    display: flex;
    width: 1000px;
    height: 1000px;
    background: gray;
  }
  #centered {
    margin: auto;
    width: 500px;
    height: 500px;
    background: red;
  }
Of course, we’re waiting on implementations to catch up with the spec: http://caniuse.com/#feat=flexbox . That’s not really the W3’s fault though.

Re: What No One Told You About Z-Index

#72

Post by morsch »

robin_reala wrote: post #71
No1 wrote: post #66

Earlier quoted context omitted.

Well put rant. 16 years after CSS was released unto the world, and it still lacks a decent way to center content. Makes me lose all faith in the W3C.

No it doesn’t: http://www.w3.org/TR/css3-flexbox/ . To whit: #container { display: flex; width: 1000px; height: 1000px; background: gray; } #centered { margin: auto; width: 500px; height: 500px; background: red; } Of course, we’re waiting on implementations to catch up with the spec: http://caniuse.com/#feat=flexbox . That’s not really the W3’s fault though.

Does that also work when you don't know the width and height of container and centered in advance?

Re: What No One Told You About Z-Index

#73

Post by cousin_it »

caf wrote: post #24
crazygringo wrote: post #19

Serious question: why do stacking contexts exist? They seem to defeat the whole purpose of z-indexes, which is a global way of determining what shows up in front of what else. I'm trying to wrap my head around them -- I guess the main takeaway is, if you don't ever want to have to deal with them, then don't ever use nested elements where both have z-indexes?

It seems to be to make pages more composable - so at the top level you can specify what order block A and B are stacked, and within A and B you can independently specify what order the blocks that make those up are stacked. This way you can change the relative order of A and B without worrying about how those blocks are internally structured, and whether they use z-index themselves.

That's an interesting rationale, but pages will never be composable as long as CSS is cascading.

Re: What No One Told You About Z-Index

#74

Post by pornel »

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?

1. CSS1 started modestly by specifying very little over what browsers already did at the time, and from the start locked itself into HTML's inline/block/float/table model.

Back then the old Netscape engine was dominant and it couldn't get even those basics right (http://acid1.acidtests.org), so there was no hope of adoption of a more advanced layout mechanism.

2. CSS had deliberate limitations that did help early implementors: e.g. elements later in the document are not supposed to cause reflow of elements earlier (with tables being "legacy" exception). That's how Opera worked until v6. That what helped all browsers implement progressive rendering. The downside is abysmal vertical centering and limited selectors (flexbox and CSS4 selectors finally drop that limitation).

3. It was hard to get any progress on this for many, many years. First we had Netscape 4, then we had IE6 holding back use of CSS on the web, so specs from that time were mostly untested ivory tower science-fiction.

Things got better since, but of course now we have massive legacy and backward-compatibility constrains... and IE8/9 holding back flexbox.

Re: What No One Told You About Z-Index

#75

Post by MDCore »

robin_reala wrote: post #71
No1 wrote: post #66

Earlier quoted context omitted.

Well put rant. 16 years after CSS was released unto the world, and it still lacks a decent way to center content. Makes me lose all faith in the W3C.

No it doesn’t: http://www.w3.org/TR/css3-flexbox/ . To whit: #container { display: flex; width: 1000px; height: 1000px; background: gray; } #centered { margin: auto; width: 500px; height: 500px; background: red; } Of course, we’re waiting on implementations to catch up with the spec: http://caniuse.com/#feat=flexbox . That’s not really the W3’s fault though.

That "spec" was a Working Draft in June 2012 and a Candidate Recommendation in September 2012. It's still not final. And browser vendors have implemented prefixed versions (even Microsoft!). I think it is reasonable to criticise the W3 for not finalising something we've been struggling with for over fifteen years.

Re: What No One Told You About Z-Index

#76

Post by Someone »

cousin_it wrote: post #73
caf wrote: post #24

Earlier quoted context omitted.

It seems to be to make pages more composable - so at the top level you can specify what order block A and B are stacked, and within A and B you can independently specify what order the blocks that make those up are stacked. This way you can change the relative order of A and B without worrying about how those blocks are internally structured, and whether they use z-index themselves.

That's an interesting rationale, but pages will never be composable as long as CSS is cascading .

That is being worked on: http://www.w3.org/TR/2012/WD-shadow-dom-20120522/:

"7 Styles

To enforce upper-boundary encapsulation, CSS rules declared by the document must not apply in a shadow DOM subtree, unless the apply-author-styles flag is set for this subtree. The flag signals that document CSS rules are applicable in the shadow DOM subtree.

Conversely, to enforce lower-boundary encapsulation, CSS rules declared in a shadow DOM subtree must not apply in the document tree."

Re: What No One Told You About Z-Index

#77

Post by Fletch137 »

If the model were to stay the same, I'd like to see something like stacking-context:break to start a new stacking context with the targeted element as parent, stacking-context:inherit for children. Same as we have now, but with the option for manual control.

Re: What No One Told You About Z-Index

#78

Post by VMG »

rimantas wrote: post #69
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…

Somene tell this guy about display: table-* and flexbox please? These rants are as funny as jokes about Macs mice having only one button.

You have to enable flexbox in about:config in Firefox and then you get partial support. You make his rant even more funny.

Re: What No One Told You About Z-Index

#79

Post by rimantas »

VMG wrote: post #78
rimantas wrote: post #69

Earlier quoted context omitted.

Somene tell this guy about display: table-* and flexbox please? These rants are as funny as jokes about Macs mice having only one button.

You have to enable flexbox in about:config in Firefox and then you get partial support. You make his rant even more funny.

How about checking your assumptions before stating them as facts? How about display:table-*?

Re: What No One Told You About Z-Index

#80

Post by sopooneo »

spyder wrote: post #52
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?

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.

The crazy thing about that is that all these css grid system seem to me to just be reimplementations of tables, with just as much markup.
Post reply on HN