Use Z-index with absolute Positioning in HTML and CSS
Description
The following code shows how to use Z-index with absolute Positioning.
Example
<!--from w ww. j a va2 s. co m-->
<html>
<head>
<title>Z-index Positioning</title>
<style type='text/css'>
p {
width:200px;
background-color:#ffffff;
padding:5px; margin:10px;
border-style:solid; border-color:#000000; border-width:2px;}
p.one {
z-index:3;
position:absolute;
left:0px; top:0px;}
p.two {
z-index:1;
position:absolute;
left:150px; top: 25px;}
p.three {
z-index:2;
position:absolute;
left:40px; top:35px;}
</style>
</head>
<body>
<div class="page">
<p class="one">Here is paragraph <b>one</b>. This will be at the top of the page.</p>
<p class="two">Here is paragraph <b>two</b>. This will be underneath the other elements.</p>
<p class="three">Here is paragraph <b>three</b>. This will be at the bottom of the page.</p>
</div>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Z Index
Combine z-index settings and opacity in HTM...
Overlap without z-index settings in HTML an...
Set z-index along with child index in HTML ...
Use z-index and sibling selector in HTML an...
Use z-index to create layer in HTML and CSS
Combine z-index settings and opacity in HTM...
Overlap without z-index settings in HTML an...
Set z-index along with child index in HTML ...
Use Z-index with absolute Positioning in HT...
Use z-index and child selector in HTML and ...Use z-index and sibling selector in HTML an...
Use z-index to create layer in HTML and CSS