CSS Layers – CSITQuestions

CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.CSS layers are more flexible and more convenient than other layout management schemas. Layers can be used for effective layout management. In the beginning, you may find it difficult , but as you get more use-to with layers, you will feel that they are more easy then their alternative.

CSS Layer Example:

The following CSS code is an example of how position (layer) one item over another. Notice in this example that h1 has a higher value (z-index: 2) than the paragraph (z-index: 1), and therefore has ahigher priority, and is positioned on top of the paragraph.

<html>
<head>
<style>
h1
{
position: relative;
top: 30px;
left: 50px;
z-index: 3;
background-color:pink;
}
p
{
position: relative;
z-index: 1;
background-color: cyan;
}
</style>
</head>
<body>
<h1>
This header with its pink background is positioned on top of this paragraph.
</h1>
<p>
You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph.
</p>
</body>

</html>