CSS: z-index - so what appears on top?

CSS provides an interesting property called z-index, that determines what element appears “on top”, on a page. You can tell that this was put in the CSS standards because of absolute positioning. Imagine the 2D page having X and Y coordinates, and the Z-axis points out of the screen at you, as well as inside to the page.

Interestingly, when these CSS standards were first developed, no one imagined they could become so useful — it’s an important part of what makes web 2.0 applications like meebo possible. (chat windows overlapping others to simulate a desktop application design)

So, when developing web applications nowadays, you could very well have needs to utilize this property. Unfortunately, support for z-index is flaky in browsers. Not every browser interprets code the same way. Unfortunately for developers, Firefox and Internet Explorer, again, have different opinions on z-index.

In this article, I will discuss some potential discrepancies with z-index, and how you can get around them.

Continue reading CSS: z-index - so what appears on top?…

Save in del.icio.us StumbleUpon this

CSS: Absolute position in a relative block; and IE’s hasLayout property

What a long title for a post! And it sums up what I’m writing about this time. I’m going to talk about a semi-commonly known CSS trick, as well as a potential problem with Internet Explorer 6 with it and the fix for that. Most advanced CSS coders/web designers will be familiar with this trick, but the beginner to intermediate readers will certainly benefit from this.

CSS Positioning

If you’re reading this, you probably know what CSS positioning is.

When you define the CSS of a div block with position: relative, any top, left, bottom, right attributes you give it will move the block accordingly, from its original position (where it would be if you didn’t move it). Giving it top: 20px will move it 20px below where it would be.

On the other hand, if you define a div block with position: absolute, you are essentially telling it exactly where it should appear on the screen. Giving it top: 0px and left: 0px will put the block at the very top left corner of the page. It also effectively “floats” the element and put it on top of any page element that are in the way, but don’t confuse this with the float attribute in CSS. Also, you can control which element appears on top with z-index, if you have more than one.

That said, let’s get into what I’m really talking about this time…

Continue reading CSS: Absolute position in a relative block; and IE’s hasLayout property…

Save in del.icio.us StumbleUpon this