Z-Index and you. It’s not just the last letter in the alphabet.

The great z-index property and how it makes your life #%*. Before reading on, I recently amended an explanation below to just give an idea of what this property is and how it can be confusing in a few different ways. Prepare yourself for the cliche statement now. If you are not familiar with CSS or HTML it is suggested that you catch up and study those 2 topics first before reading forward below. Wow, that almost read like a recording… So to continue.

The z-index is a C.S.S. property that assigns the stack order of an element in the DOM on a web page. For instance, the element which gets assigned a higher stack number(value) from the C.S.S. z-index property will sit on top of another element on the web page with a stack order number value that is lower. If the 2 elements positions are the same or very close to each other that is. In the example below the code indicates that you have an image with class selector named img_one in C.S.S.. In this case since the we are assigning a negative value this image now has the capability to sit below another image with a value that is not negative like 1 for instance.

.img_one {

position: relative;

z-index: -1;

}

Please note that for the z-index property to initiate(work), we first need to make sure that the position: property must be there and have a value set to it like ‘relative’ in this case. Never static or no position set at all.

One tidbit teaser. Never use static with this. Your elements are gonna have to have a position attribute declared in CSS that is anything but static. (Static is default for those that don’t know)

No, not static like your laundry. If you are having laundry issues just stay home and don’t bother with that meeting in front of the CEO or CTO this morning.

What are the 5 position values for this property called when associated with CSS ? Recruiters pay attention to this so you can ask this on the next test for your prospective candidates.

static (ignores z-index property like a bad date)

Relative(is fine with this)

Fixed (seems like it should mean static but you must declare making it different)

Absolute(yes. Just what is sounds like)

Sticky(don’t ask)

So here is the rest of this technical rant and it gets personal. Sorry, you are going to have to endure. I promise it will all make sense in the end. Maybe? Ahh, have confidence in me!

When I was a wee lad and working at a once popular rich media advertising company (the comings and goings of startups), I was on the dev team there as a JavaScript developer cum Q.A. analyst. I believe that being on a development chain/team is now popularly known as SCRUM or Agile? Cool terms because it all sounds cool to make everything an acronym just like the military does. We had version control and all that to a certain degree then…sorta. We just didn’t have the new fangled, dangled flashy descriptions like SCRUM, Agile, Fragile, Star Spangled. You know. Keywords in the nomenclature of tech that makes things sound more important than they might be. Even if they only make the rounds in the tech mags or job interviews as topics for a month. You’ve used them. Don’t pretend you haven’t. And don’t pretend you knew what some of them were at interviews until you were asked. Then you looked them up secretly when you went running to the bathroom to “use the restroom”.

So, I’m sorta rambling. I told you this might happen. Let’s get back to it. How did z-index even affect me back then? Well, I remember when a lot of elements needed to be in a small area on a website inside of an iframe that meant the area you were working with was limited and tight pixel wise. Depended on the size of the thing you working on. In this case an ad unit on a publisher site.

Lets say you have an ad unit that was being displayed on a publisher like yahoo.com’s front page and the spot or iframe the unit would be displayed in was a 300×250 space. Then lets say you had a lot of content to get across the to visitor in that little ad(more bang for the money). Well sometimes these elements were so tight and overlapping that you may or actually would see something called “shine through”. WHAT!? Hold your horses and stop the train! What the #@*& is shine through? Well, actually I think it was a coined expression that was an accident. I personally have never ever seen this term as any technical explanation on any forum or site or tech spot with any validity.

But still, let’s explain what “shine through” was supposed to be for the purpose of the property z-index issue. Well, if you can think of a thin sheet of wax paper that is usually used for cooking with a big round spot of grease on it and when you hold it to the light you may be able to actually see through it. SHINE THROUGH. I am not sure if our accounts team made this term up to explain their idea of what the z-index problem was or if it was another team somewhere else in another galaxy but anyways, if any of you all have ever heard of this somewhere else then send me a text.

There is usually a lot of text content in a div that gets over layered in this problem and sometimes, if not most of the time, you can see the element on the page or the color of the div that is layered underneath making it hard to read. Hard to read the copy content on the top current div that is of ultimate importance to the end user/visitor. It looks crappy okay!

So for the technical at heart I apologize for the above. For those who love drunk tech post explanations then…your welcome! I am joking.

In summary we have here a technical explanation and a very non technical explanation of what z-index issues are or what z-index is in general. I do know that this post is angled at looking at the z-index property from an issue’s point of view but remember the point of the z-index property is to evoke functionality that helps to make your elements on a page work lovingly together to display layered beauty. Don’t judge me. I’ve got to convey this message somehow! Happy stacking.