Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "z-index"
-
z-index: 9;
😕
z-index: 99;
😐
z-index: 999;
😑
z-index: 9999;
😡
z-index: 9999 !important;
😠
z-index: 9999 !IMPORTANTAHFA;
😲29 -
Hey frontend developers. If you do THIS:
z-index: 1000;
...expecting that it will ensure your div will be on top no matter what, I'm about to fuck your world up. Check this shit out:
z-index: 1001;7 -
Coworker: hey man, do you know what is the limit for z-index on CSS?
Me: not sure but I think it is the signed int limit.
Coworker: the waaat?
Me inside: GET THE FUCK OUT OF HERE!!!!!!!7 -
My rant on CSS in general, including z-index (a cruel practical joke) and the "secret menu."
https://medium.com/@c09b6133a238/... -
What is the optimum value for z-index in css?
z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;4 -
The GashlyCode Tinies
A is for Amy whose malloc was one byte short
B is for Basil who used a quadratic sort
C is for Chuck who checked floats for equality
D is for Desmond who double-freed memory
E is for Ed whose exceptions weren’t handled
F is for Franny whose stack pointers dangled
G is for Glenda whose reads and writes raced
H is for Hans who forgot the base case
I is for Ivan who did not initialize
J is for Jenny who did not know Least Surprise
K is for Kate whose inheritance depth might shock
L is for Larry who never released a lock
M is for Meg who used negatives as unsigned
N is for Ned with behavior left undefined
O is for Olive whose index was off by one
P is for Pat who ignored buffer overrun
Q is for Quentin whose numbers had overflows
R is for Rhoda whose code made the rep exposed
S is for Sam who skipped retesting after wait()
T is for Tom who lacked TCP_NODELAY
U is for Una whose functions were most verbose
V is for Vic who subtracted when floats were close
W is for Winnie who aliased arguments
X is for Xerxes who thought type casts made good sense
Y is for Yorick whose interface was too wide
Z is for Zack in whose code nulls were often spied
- Andrew Myers4 -
My boss still thinks that resizing his browser is equivalent to mobile testing, and his designs are desktop only and says "just have everything stack on top of each other"
below is how I feel.
* {
position: absolute;
Z-index: 1;
Top: 0;
Left:0;
}3 -
Idea to overhaul the CSS !important system...
Allow it to accept a numerical value much like z-index.
But the max !important level is the current year so that the more current your code, the more important it is.
Works based off the last edited date of your files to prevent cheaters.7 -
Using z-index 99999999999.
Are you fucking serious... please go somewhere far far away from me and cut your hands off so I don't have to deal with this shit.3 -
If you're having CSS problems, I feel bad for you son,
I got 99 problems that I fixed with 'z-index: 100;' -
As a Backend guy doing CSS. (Honestly don't know what i'm doing)
position: absolute;
z-index: -999999999999; /* better fucking work*/
margin-left: -1200;
background: red;
asdfghjkl
wait? what?3 -
Im getting annoyed by the new layout of google. Hovering the sidebar will make a scrollbar appear but the main part of the site's scrollbar will disapear. This results in most content moving from their original place. Let's make a Stlyish script to fix this problem I thought. Guess what now somethings stay where they should be, but the things that were first on the right place have moved. Also this will make the header shorter. I'm getting more and more amazed how shitty some frontend devs are at google.
To fix one bug they, instead of solving the bug, tried to counter the result of the bug.
I do like the z-index of the sidemenu though (it's 2005, the year youtube was created)12 -
One time I was building a custom modal for some crappy WordPress template and I was having trouble with the header rendering above my backdrop, after digging into the CSS I realized the headers z-index was literally set to 9001.1
-
Defining importance as a Web Developer.
Firefox === Iceweasel !important;
z-index: 99999999999999999; -
I still remember when I was 8 years old and used to use "position:absolute"everywhere and use top and z-index to hardcodedly place my elements in my old web projects. I used a lot of <br> and padding + margin were not familiar words to me.
Somehow these projects were responsive, too. Strange times.
Nowadays I avoid "position:absolute", z-index and <br>s like the plague lol5 -
My favorate bookmarklet (ES6 only):
javascript:(()=>{var b,c,a=document,f="onreadystatechange",h="https://rawgithub.com/smore-inc/...=(p,q)=>{p.readyState?p[f]=()=>{"loaded"!=p.readyState&&"complete"!=p.readyState||(p[f]=null,q&&q())}:p.onload=function(){q&&q()}},k=()=>{clippy.load("Clippy",p=>{$(".clippy").css("position","fixed"),$(".clippy").css("z-index",1e3),p.show(),p.moveTo(100,100)})},m=()=>{(c=a.createElement("script")).src=h+"clippy.js",a.body.appendChild(c);var p=a.createElement("link");p.rel="stylesheet",p.type="text/css",p.media="all",p.href=h+"clippy.css",a.getElementsByTagName("head")[0].appendChild(p)};"undefined"==typeof jQuery?(b=a.createElement("script"),b.src="https://ajax.googleapis.com/ajax/...,j(b,()=>{m(),j(c,k)})):"undefined"==typeof clippy?(m(),j(c,k)):k()})();14 -
Working on modifying a legacy web project and just about every single element is `position: absolute` with crazy z-index juggling and hard-coded pixel sizes and positions everywhere 😭
To make it even worse, a bunch of the javascript will also change elements sizes and positions so it takes forever to track down why an element is where it is1 -
was pretty excited to see the annular solar eclipse, pretty cloudy today, wish I could adjust the sun's z-index 😐
-
Today on "fuck Firefox": elements with display: inline and position: relative completely mess up z-index and nested fixed / absolute positioned elements. It's a known bug, it has open issues on bugzilla since 2005, but still no fix. IE 8 can get it right, but not Firefox...9
-
My CSS-only hamburger menu.
It's cool and all, just a few lines of code, but some days ago I tried to do a 2 sides hamburger menu.
Based on that I just copied it and changed every left for right. Worked. Like. A. Charm. I had to apply some z-index stuff of course but nothing out of ordinary.
I'm so cool. I'll upload it to GitHub ASAP, but it's not a priority rn. -
Made a custom pop up for the web app im building then i encouter a problem when i saw the pop up in safari it doesnt show up properly -_- deym cross platform compatibility the background is not grey and i think safari ignored the z index in my css :(
-
Does it count as a learning experience if I have still not yet fully learned it? Then it's estimating tasks.
Fix this bug where the modal is rendered underneath the message-count-badge on your profile? Heh should be easy, 10 mins to set a higher z-index.
Final cost: two weeks, where I needed two status meetings and drawing on the whiteboard to explain why this happens and why it needs a major restructuring.1 -
Heres the initial upgraded number fingerprinter I talked about in the past and some results and an explanation below.
Note that these are wide black images on ibb, so they appear as a tall thin strip near the top of ibb as if they're part of the website. They practically blend in. Right click the blackstrip and hit 'view image' and then zoom in.
https://ibb.co/26JmZXB
https://ibb.co/LpJpggq
https://ibb.co/Jt2Hsgt
https://ibb.co/hcxrFfV
https://ibb.co/BKZNzng
https://ibb.co/L6BtXZ4
https://ibb.co/yVHZNq4
https://ibb.co/tQXS8Hr
https://paste.ofcode.org/an4LcpkaKr...
Hastebin wouldn't save for some reason so paste.ofcode.org it is.
Not much to look at, but I was thinking I'd maybe mark the columns where gaps occur and do some statistical tests like finding the stds of the gaps, density, etc. The type test I wrote categorizes products into 11 different types, based on the value of a subset of variables taken from a vector of a couple hundred variables but I didn't want to include all that mess of code. And I was thinking of maybe running this fingerprinter on a per type basis, set to repeat, and looking for matching indexs (pixels) to see what products have in common per type.
Or maybe using them to train a classifier of some sort.
Each fingerprint of a product shares something like 16-20% of indexes with it's factors, so I'm thinking thats an avenue to explore.
What the fingerprinter does is better explained by the subfunction findAb.
The code contains a comment explaining this, but basically the function destructures a number into a series of division and subtractions, and makes a note of how many divisions in a 'run'.
Typically this is for numbers divisible by 2.
So a number like 35 might look like this, when done
p = 35
((((p-1)/2)-1)/2/2/2/2)-1
And we'd represent that as
ab(w, x, y, z)
Where w is the starting value 35 in this case,
x is the number to divide by at each step, y is the adjustment (how much to subtract by when we encounter a number not divisible by x), and z is a string or vector of our results
which looks something like
ab(35, 2, 1, [1, 4])
Why [1,4]
because we were only able to divide by 2 once, before having to subtract 1, and repeat the process. And then we had a run of 4 divisions.
And for the fingerprinter, we do this for each prime under our number p, the list returned becoming another row in our fingerprint. And then that gets converted into an image.
And again, what I find interesting is that
unknown factors of products appear to share many of these same indexes.
What I might do is for, each individual run of Ab, I might have some sort of indicator for when *another* factor is present in the current factor list for each index. So I might ask, at the given step, is the current result (derived from p), divisible by 2 *and* say, 3? If so, mark it.
And then when I run this through the fingerprinter itself, all those pixels might get marked by a different color, say, make them blue, or vary their intensity based on the number of factors present, I don't know. Whatever helps the untrained eye to pick up on leads, clues, and patterns.
If it doesn't make sense, take another look at the example:
((((p-1)/2)-1)/2/2/2/2)-1
This is semi-unique to each product. After the fact, you can remove the variable itself, and keep just the structure in question, replacing the first variable with some other number, and you get to see what pops out the otherside.
If it helps, you can think of the structure surrounding our variable p as the 'electron shell', the '-1's as bandgaps, and the runs of '2's as orbitals, with the variable at the center acting as the 'nucleus', with the factors of that nucleus acting as the protons and neutrons, or nougaty center lol.
Anyway I just wanted to share todays flavor of insanity on the off chance someone might enjoy reading it.1 -
Hang with me! This is *not* a math shitpost, I repeat, it is NOT a math shitpost, not entirely anyway.
It appears there is for products of two non-trivial factors, a real number n (well a rational number anyway) such that p/n = i (some number in the set of integers), whos factor chain is apparently no greater than floor(log(log(p))**2)-2, and whos largest factor is never greater than p^(1/4).
And that this number is at least derivable, laboriously with the following:
where p=a*b
https://pastebin.com/Z4thebha
And assuming you have the factors of p/z = jkl..
then instead of doing
p/(jkl..) = z
you can do
p-(jkl) to get the value of [result] whos index is a-1
Getting the actual factor tree of p/z is another matter, but its a start.
Edit: you have to provide your own product.
Preferably import Decimal first.3 -
How broken is z-index implementation on Chrome?!
Almost an hour lost today, due to perfectly fine web code running on Firefox, but showing completely wrong z-order on Chrome.
The reason? I manually changed the z-index of a child and not the one from the parent DIV. (and I was only making the child z-order *higher* than everything else on screen, so I could drag it around)
Code now has a bunch of "// thanks Chrome!" to show due appreciation. Grrr....1