Home Advertise with us Forum Articles Sitemap Contact

CSS Layers

As discussed in the CSS positioning chapter, positioning of HTML elements can cause them to be placed on top of one another. CSS helps in this respect by controlling which HTML elements to appear on top with the help of layers.

Each HTML element is given a priority in CSS. By default, the element appearing later in the source code is given a higher priority. In case of two CSS positioned HTML elements overlapping with each other, the one with higher priority appears on top of the other. The priority can also be defined manually by setting the z index value. Larger the value, higher is the priority of the element.

h4{ position: relative; top: 30px; left: 50px; z-index: 2; background-color: #336699; }

p { position: relative; z-index: 1; background-color: #FFCCCC; }