Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Stacking Elements with CSS Positioning

The default placement when elements overlap is that those existing later in the code are stacked on top of those entered earlier in the code. Additionally, elements placed using CSS positioning can be placed on top of content that is not positioned using CSS.

The order elements are placed on top of each other is called the stacking order.

The stacking order doesn’t have to be left up to the browser. We can specify the stacking order of elements using the z-index property:

The value in the code above is either a numeric integer (positive or negative) or the keyword auto to let the browser determine the stacking order.

Specifying the z-index order is usually done with inline CSS. In the image labeled "Stack 1" you can see a screen capture of a web page I made showing three overlapping divisions. The divisions are displayed in the default order, which is the same as setting the z-index to auto.

By default, the last object coded is the uppermost in the stacking order. The first object coded is at the bottom of the stacking order. Of course, that leaves the middle object coded still in the middle of the stacking order in this example, but the stacking order can be changed.

The image labeled "Stack 2" shows the same divisions. The code is the same except for one thing. I changed the stacking order.

The box that was on top is now on the bottom, the box that was in the middle is now on top, and the box that was on the bottom is now in the middle.

Cools beans, eh McGassy? When setting the stacking order, the element with the highest z-index value is placed on top of the stack. The next highest z-index value is next, and so on.

Something like this could be used for a picture collage without having to open a graphics editor. Here's the source code for the three boxes:

<div style="width: 250px; height: 100px;
    position: absolute; top: 20px; left: 20px; 
    z-index: 2;">1</div>

<div style="width: 80px; height: 200px; 
    position: absolute; top: 60px; left: 40px; 
    z-index: 3;">2</div>

<div style="width: 140px; height: 80px;
    position: absolute; top: 100px; left: 80px; 
    z-index: 1;">3</div>

Two Cool Stacking Tricks

I don't know about you, but to me these are a couple of pretty cool stacking tricks.