Welcome Guest! (App Version 3.1)

websitnero logo name



  • z-index can only be used for element with position value as relative, absolute or fixed.
  • z-index decides which element will cover the other in case their boundries overlap.

Z-Index Property in CSS

Z-Index is the CSS property which specifies the z-order of an element. In case 2 elements overlap with each other, then z-order determines which of these will cover (or be above) the other element.

Note: Note: Z-Index only works with elements with position values as absolute, relative, or fixed. But, not for elements with position as static.


  div {height:300px;position:relative;border:1px solid black;}
  p {height:100px; width:100px; position:absolute;}
  .p1 {background:yellow; top:0px; left:50px;}
  .p2 {background:pink; top:50px; left:100px;}
  .p3 {background:green; top:100px; left:150px;}
  .p4 {background:blue; top:150px; left:200px;}
  .p5 {background:orange; top:200px; left:250px;}
    <p class="p1">This is paragraph 1.</p>
    <p class="p2">This is paragraph 2.</p>
    <p class="p3">This is paragraph 3.</p>
    <p class="p4">This is paragraph 4.</p>
    <p class="p5">This is paragraph 5.</p>


This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

This is paragraph 5.

Further Reading

1. Z-Index

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.