Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
CSS BASIC
CSS BOX MODEL
CSS ADVANCED
CSS3 FEATURES
CSS3 EXAMPLES
CSS3 REFERENCE
Advertisements

CSS Layers

The CSS z-index property can be used in conjugation with the position property to create an effect of layers like Photoshop.

Stacking Elements in Layers Using z-index Property

Usually HTML pages are considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, boxes can be stacked along the z-axis as well i.e. one on top of the other by using the CSS z-index property. This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

The z-axis position of each layer is expressed as an integer representing the stacking order for rendering. An element with a larger z-index overlaps an element with a lower one.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}
Advertisements
Bootstrap UI Design Templates