CSS - Layers
CSS - Layers
CSS Layers are a concept that is used to control the stacking order of different DOM elements in a webpage. Thez-indexproperty determines the stacking order of elements within a stacking context.
The elements with a higher z-index are layered above those with a lower z-index and if elements share the same z-index, they stack according to their order in the DOM. We will look more into details and examples of CSS layering in this tutorial.
Table of Contents
CSS Layering With z-index PropertyLayer Text Above ImagePositioning Without z-index Property
CSS Layering With z-index Property
As mentioned above thez-indexproperty can be used to decide stacking order of element in a webpage. The following example demonstrates how to create vertically stacked elements using z-index property. The elements with higher z-index value are positioned above the elements of lower z-index value.
Example
Layer Text Above Image
In CSSpositionproperty can be used to position text in different locations above an image.
First we need to set position property for image container asposition: relativeand position property of text asposition: absolute. Now you can position of text elements using CSSinsetproperties like top, bottom, left and right.
Example
Positioning Without z-index Property
The following example demonstrates how to create layers without usingz-indexproperty.