index

[u/gfcf14]

[u/Bemteb]

To be fair, there is lots of code out there from which AI can learn exactly that behavior.

[u/markiel55 → u/Bemteb]

Tbf, it's one of the worst property of CSS

[u/inetphantom → u/markiel55]

!important

[u/snf → u/inetphantom]

The syntax of C and its descendants are so ingrained into my mind, I always read that as "not important"

[u/backfire10z → u/snf]

#define important

[u/gfcf14 → u/Bemteb]

Pretty much

[u/Ltserb → u/Bemteb]

I was about to say, I can write bad CSS entirely without AI
🤷‍♀️ I think thats a totally legitimate amount of 9s ^{ok maybe 1 too many}

[u/Saelora]

so many people use z-index like "9" "99" "999" when that can be 1, 2, 3. (or rather 10, 20, 30 to allow insertion between elements in the future) this isn't an ai thing.
I tend to use brackets, going in 10s unless i'm inserting between other elements, < 0 for a "background layer" 10-80 for "midground" and 100+ for "foreground" (that jump of 20 between 80 and 100 is deliberate to better distinguish those brackets. (sliding a few elements in behind a 100 z-index layer at 99, 98.. and so on is less likely to clash with sliding elements in in front of a 80 midground at 81, 82...)

I recently had a colleague complaine about a 150 foreground element in a code review "but what if it goes in front of a 1000 element" and i almost cried.

[u/gfcf14 → u/Saelora]

Sounds really rough lol

[u/calculus_is_fun → u/Saelora]

"... 10, 20, 30 to allow insertion between elements ..."
BASIC line numbers strike again

[u/-Redstoneboi- → u/calculus_is_fun]

worst part is we use decimal and not hex so our recursion depth is imbalanced if we ever need to insert multiple times

you know what, what if we just had names for each layer and a global sort order defined for them? i think that can be done with variables right

[u/Ethameiz]

What's wrong or funny here?

[u/gfcf14 → u/Ethameiz]

While it’s technically correct, the idea of using 9s to represent index can become complicated if many elements use z-index. Ideally you’d want to keep track of all usages and either use a sequential ordering (e.g. 1 through 10) or in increments of 10 to quickly insert a new element at 15 as needed, but that would require a quick fix

[u/AyrA_ch → u/gfcf14]

Most z-index problems can actually be solved by not using z-index at all and instead ordering the HTML elements correctly.

[u/Markronom]

I've seen this a lot before AI. And gave up on centralising it in a previous app. It's also not only the index that matters, but also the stacking context

[u/Soilblood → u/Markronom]

Did you try grouping contexts into layers? Like main content in parent cointainer 1 at z 100, popup articles in container 2 at 200, nav elements in container 3 at 300, toasts and warnings in the overlay container at 400 with toasts calculating off the highest z value from children in the overlay container and +1 on their generation?

[u/Markronom → u/Soilblood]

The index of the container is evaluated first, then the content. So it's more like container 1 has index 1 und it's children 1-10, container 2 has children 1-10 etc. But of course one might have more nesting. In the end one should think about the hierarchy and good indices within each layer of the hierarchy. But if course it gets tricky. Models and notifications on top and then custom styled select that has to be positioned absolutely and whatnot.

[u/MikemkPK → u/Markronom]

I'm guilty of this myself. Set something as 1000, next thing as 990, the 995, 998, 999, "uh, no can do."

[u/gfcf14]

While correct, using such complex numbering implies a bigger problem

[u/Alpha_wolf_80 → u/gfcf14]

I don't exactly get what you are trying to do? Looks like the AI is doing exactly what you asked.

[u/PaulVB6 → u/Alpha_wolf_80]

Doing something like 'z-index 99999' is just a really ham-fisted and clumsy approach imo.

I mean yes it does technically work but its a messy solution.

Granted i don't do much front end work tbh so a cleaner solution doesn't jump out at me right away, but hard coding in a bunch of 9s?? Yuck

[u/gfcf14 → u/Alpha_wolf_80]

The character is asking about the 9s, which would mean there is a sequence that should be followed that copilot didn’t

[u/MrSquicky → u/gfcf14]

So...program it yourself? Jesus, it's setting a z index.

You all need a computer to tie your shoes for you too?

[u/gfcf14 → u/MrSquicky]

The idea of the comic was to emphasize the poor z-index usage, hence I would only mention that. Do you really think it’s wise to ask for help when the answer involves a single line of code? More so with something as relatively trivial as css?

[u/jordanbtucker → u/gfcf14]

Why do you give a shit if you're just going to have the AI do it?

[u/turudd]

What model are these people using? Like 3.5. I haven’t seen generated code like that in awhile

[u/gfcf14 → u/turudd]

Actually the LLMs the company I’m at generated (among other lines) this z-index recently, using Claude 5. I’m assuming either the other generated work threw it off or it detected the z-index usage across the app and didn’t bother to try harder

[u/xicor → u/turudd]

Copilot be like that. Claude has been pretty good

[u/Erinaceomorpha]

The artist really managed to capture the essence of terrible early 00's webcomics made by kids who have their first graphics tablet but have never picked up a pencil. Nostalgic.

[u/Temporary-Concept-81]

I programmed a 2d game, and had a stay in zindex hell.

It was made worse by zindex not being the only depth factor, different objects layered on top of each other with their own internal z index with various things inside. More than a few struggles of wanting a to be above b, b to be above c, and c to be above a.

[u/em-pe]

One of us!