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

what is z-index propertyOne 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:



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


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. : )

Need Quick Help within 24 Hours? ASK NOW

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 »

19 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Thanks for this great post.

    I have searched a lot before on this problem and now its on mbt

  2. This comment has been removed by a blog administrator.

  3. Hey mohemed i need your help please how can i show the facebook comment without opening the post this is my blog http://damnlolpicture.blogspot.co.uk/

  4. @probloggerstricks

    nah...try not copy all of Mohammad's style my friend :(

  5. Thanks for another beautiful post. I am learning many things day by day just following your articles.

    I blog @ Manidipa's Kitchen

  6. So Nice Info For Z-index ..Its Clearly

  7. Nice tutorial bro :)
    Your knowledge about HTML is surely too immense.
    Thanks and keep us updating like this :)

  8. Wow this is cool

  9. How to use dotted line for headings in post as u r using ? and i am using same template u r using plz reply soon.
    Thank you !

  10. Wow i got it :D

  11. This is my school. I, learning everything here! Thank you to whoever make all this post. LetraMania0919

  12. I am really glad that most of your found it helpful. Thanks for the warm feedback. :)


    Please read this post and once you know what to do remove the codes form the facebook comment plugin code.



    Please read http://www.mybloggertricks.com/2009/11/change-heading-style-in-blogger.html

  13. Your contents are progressing with days keep it up guys.
    Web Development

  14. I am so grateful to read this such a wonderful post. Thank you for discussing this great topic. I really admire the writer for allotting their time for this impressive article. Thank you.
    Web developer