InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

css z-index – ordering of overlapping elements

on Feb 9, 2016

CSS z-index property decides the ordering of elements when they overlap. Higher z-index mean it is closer to you and hence with appear accordingly. Few points to note about z-index:

  • The default z-index value is auto. In case there is nothing specified in any parent, it is taken as 0.
  • z-index only works on positioned elements (relative, absolute, fixed). It does not work on position:static elements (which is default value of position).

css-z-index

CSS property z-index

CSS version: CSS 2.1
Value: auto | integer | inherit
Initial: auto
Applies to: positioned elements
Inherited: no

Examle – positive and negative z-index

Here we are shifting second div (position:relative) above (-10px) and its z-index value will decide its ordering.

In the following code, CSS property z-index can be changed to the following values
  • 1
  • -1
<style type="text/css">
div {width: 100px;}
.first {
  background-color: lightgray;
}
.second {
  background-color: lightgreen;
  position:relative;
  top: -20px; left:20px;
  z-index: 1;
}
</style>
<div class="first">
  first div with default z-index value
</div>
<div class="second">
  second div with some z-index
</div>
z-index refresh done
try it online

Specification

  • W3C CSS 2.1 z-index specification

Suggested posts:

  1. WordPress – write custom php log to separate file
  2. CSS selector specificity
  3. CSS attribute presence and value selectors
  4. Edit and debug css in Chrome
  5. CSS attribute substring selectors
  6. CSS general sibling selector
  7. CSS flexbox – display flex and inline-flex
  8. jQuery – find select element selectedIndex, value and text
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials, Web Development
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress