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…
What No One Told You About Z-Index
41–50 of 100 posts
Re: What No One Told You About Z-Index
#42Don'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?
Re: What No One Told You About Z-Index
#43Don'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…
Re: What No One Told You About Z-Index
#44To 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 .
Re: What No One Told You About Z-Index
#45Earlier 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,…
Re: What No One Told You About Z-Index
#46> 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
#47Earlier 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.
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
#48Earlier 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
#49Don'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?
"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
#50Earlier 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).
http://paulirish.com/2012/box-sizing-border-box-ftw/
Specifically the Performance section.