Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Layers Tutorial

CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.


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 a higher priority, and is positioned on top of the paragraph.

<html>
<head>
<style>
<h1>
{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}
<p>
{
position: relative;
z-index: 1;
background-color: #FF0000;
}
</style>
</head>
<body>
<h1>
This header with its blue 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>

Click on CSS Layers Example to view what the above CSS code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details