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

11–20 of 100 posts

Re: What No One Told You About Z-Index

#11

Post by aroman »

faramarz wrote: post #3

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv

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 element. Do not add/change the position property of any element."

Re: What No One Told You About Z-Index

#12

Post by garand »

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

Re: What No One Told You About Z-Index

#13

Post by crescentfresh »

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?

Re: What No One Told You About Z-Index

#14

Post by flexxaeon »

(I'm guessing that) since opacity is a "postprocessing operation"[1] it has to 'redraw' the entire div which causes it to fall back to it's parent order in the stack.

But I'm not sure if this is a fair assessment, as you're applying opacity to the div instead of the span.red, the element where the rule was applied. When adding opacity to the span the z-index stays intact

[1] http://www.w3.org/TR/css3-color/#transparency

Re: What No One Told You About Z-Index

#15

Post by RyanZAG »

This seems more like a bug in opacity than anything. Logically, opacity should have no impact at all on layout positioning, only on blending. So this is more of a workaround created to speed up processing of elements with opacity less than 1 that introduces a design bug in the spec.

Re: What No One Told You About Z-Index

#16

Post by crazygringo »

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

I've learned never to add rules to the asterisk ever, after being badly burned on other projects multiple times.

At first glance, this rule appears more innocuous than others I've seen, because position is never inherited. (Unlike a font-size in a plug-in that broke every inherited font-size on the whole site).

But extra position:relative declarations can cause big problems on mobile browsers (including iOS6) when combined with CSS transitions. Don't ask me why, just browser bugs. I'd be extremely wary of any kind of global layout-fixes like this.

Re: What No One Told You About Z-Index

#18

Post by ricardobeat »

flexxaeon wrote: post #14

(I'm guessing that) since opacity is a "postprocessing operation"[1] it has to 'redraw' the entire div which causes it to fall back to it's parent order in the stack. But I'm not sure if this is a fair assessment, as you're applying opacity to the div instead of the span.red, the element where the rule was applied. When adding opacity to the span the z-index stays intact [1] http://www.w3.org/TR/css3-color/#transpare…

That's the underlying reason - the same is true for position, if they didn't create new contexts rendering would be an impossible mess.

Adding opacity to the span has no effect because it already has position:absolute.

Re: What No One Told You About Z-Index

#19

Post by crazygringo »

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?

Re: What No One Told You About Z-Index

#20

Post by ricardobeat »

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

This does _three_ things: third is severely slows down page rendering.
Post reply on HN