z-index: Send an HTML element to Back or bring to Front

One of the major problems people facing while designing HTML layouts using CSS is the overlapping issue. CSS positioning lets you position an HTML object anywhere you like. You can locate an object anywhere you like but it involves great care. By using the CSS positioning attributes like absolute, fixed or relative you often come across a problem where on object overlaps another or blocks the view of another section. In order to bring one div section on front or back of another you will need to use z-index property of CSS. Just like in Adobe Photoshop CS5, z-index lets you to send an element to back or bring it to front. In todays' tutorial we will aim at explaining this property briefly and with clarity.

 

DEMO: If you carefully observe the floating sharing widget towards your left, you will find that as soon as you reach the footer/bottom of this blog, it hides behind the footer. We applied z-index to so that the widget remains on front near the post body but goes to back as soon as it touches the lower section of the page.

What is z-index?

z-index is a number which can be either positive or negative. The default z-index value is Zero. The object with the highest z-index value appears on top, followed by the next the element with second highest z-index value and the element with lowest z-index will appear behind all others. If two elements have similar z-index value the web browser will layer them in the order they appear in the HTML code.

W3schools says:

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order

 

How it works?

You may find the following tool important in understanding how it works. z-index only works on positioned elements like (position:absolute, position:relative, or position:fixed). In our case in order to push the floating widget to back and keep footer on front we gave the sharing widget a value smaller than the footer.

For Sharing widget we kept it default. We did not added any code to it. The default z-index value is always 0. But for the footer we used:

position:relative;

z-index:9999;

9999 is the maximum value I choose for the object that I want to appear above all. I used the same concept for the sticky bar above. You may set position to absolute if you don't know what to choose else you will choose position parameters depending upon your requirement.

Take a look at the following example: Below five elements have different stack order

A                 z-index:150;

B                 z-index:30;

C                 z-index not set

D                 z-index:-30;

The order in which they will appear is:

1. A

2. B

3. C

4. D

 

D will appear behind all four elements while A will appear on top of all. C has not z-index set so by default the value assigned to it is zero.

What should you do now?

Check the elements on your blog or website and see which elements is blocking the view of others and which elements should appear on top of others. Inside the style code for each just add position and z-index properties to them accordingly to make things look neat and clean.

Need Help?

If you need my help in finding the codes then feel confident to post your query in the comment box below. Today's post was meant to help most of you this important yet simple problem that would make your blog design look even better. I will be sharing such CSS tips in order to help you with designing basics. I do humbly apologies for not posting frequently after 6th June onwards you will find a flood of exciting posts every day. Till tomorrow take good care of your loved ones and yourself. Peace and blessings pals. : )

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »