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

31–40 of 100 posts

Re: What No One Told You About Z-Index

#31

Post by eranation »

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 confusing yucky table layout, it's much simpler, it's, ehm, line-height or something, or vertical-align, but only for text, sorry, silly of me, I just do top:50 and the relative inside absolute trick again (or vice versa, one sec let me check in JSFiddle),

Ok aligning might not be a good example, but it's so easy to have something snap to something else, like this DIV top right corner should always be on the buttom left of that other div, oh, can't do without some jQuery code? of course you can, let me go to codepen and show you for a sec, ok, never mind that, at least it's so easy to columns (more than exactly 3) that one of them is fixed width and the others are variable width, that's why we have float:left, float:right and well, nevermind.

But I can have a left navigation bar that will stretch to the bottom, or have a footer that will stay down when resizing, it's all easy and done without any workarounds or tricks or endless trips to stackoverflow or using zurb foundation / bootstrap.

So I'm surprised that a simple thing like putting something on top of the other got to be so complicated, well, you can't have it all, nothing is perfect

Re: What No One Told You About Z-Index

#32

Post by moultano »

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?

Re: What No One Told You About Z-Index

#34

Post by oscilloscope »

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…

I teach classes on SVG, and CSS is one of the toughest parts. The distinction between styles and attributes seems very arbitrary in SVG. There are many layers of inconsistency. Compare text-align for HTML and text-anchor for SVG:

    text-align: left | center | end | justify
    text-anchor: start | middle | end

Re: What No One Told You About Z-Index

#35

Post by harlanlewis »

ricardobeat wrote: post #20
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 .

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, and opting out of this back to default behavior is much more painful than opting in with a better-scoped `.feature * {position:relative}`.

Every new developer will need to wrap their head around nonstandard page flow, and customizations like this have a way of accumulating into a very intimidating environment. As a general rule, I don't want to inherit anything silent and clever without very compelling reasons (* {box-sizing:border-box} passes this test because it makes so many things so much easier).

Re: What No One Told You About Z-Index

#36

Post by sgdesign »

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…

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

#37

Post by [deleted] »

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…

[deleted]

Re: What No One Told You About Z-Index

#38

Post by 2468ben »

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?

(I don't think they're good reasons, just reasons)

1. Unlike print layout, the dimensions of a webpage can change, and so we slowly invented an evolving layout framework for something without fixed dimensions. I've done typesetting since it was exacto knives and hot wax, and if you told me then to imagine a stretchable paper for news I would have cried in the corner.

2. The layout framework was independently built by a bunch of separate companies, who by nature of competition weren't going to agree on everything (see every browser).

3. The agreements that WERE made were done by committee, including the reluctant inputs of competing companies. This method of design will guarantee that they end up with something weird.

4. Make it backwards compatible with all the previous ghosts of architects past.

Imagine if Ford, GM and Chrysler had to build a joint car every few years.

Also, try designing a page in Flash and using (or just reading about) their graphics/layout/text frameworks. Some things are much harder than HTML/CSS, some are much easier, but it offers a great comparison on a completely different way of solving layout. I've implemented a spec like CSS for customizing Flash app appearances, and compared to what existed before, it made everything better.

Re: What No One Told You About Z-Index

#39

Post by pippy »

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…

CSS is a square peg in a round hole. It was never meant to be used for the media heavy pages of today.

it would be nice if there was a modern update of CSS.

Re: What No One Told You About Z-Index

#40

Post by jrabone »

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…

Sounds like it's time to... http://giveupandusetables.com
Post reply on HN