The CSS property ,z-index,which overlaps the content of two elements. The property specifies a stack order that positions one element over another. Now create a web page named overlappingproperty.html to understand how the element are overlapped.
<!doctype html>
<head>
<title>OVERLAPPING PROPERTY IN CSS
</title>
<style type="text/css">
p{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1 style="color:green;">This is the first heading tag</h1>
<p>This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
</p>
<h2 style="color:red;">Because the Paragraph has a z-index of -1, it will be placed behind the text.</h2>
</body>
</html>
The z-index property is set to -1 for the p element. Then the p element is placed beneath the two heading elements h1, h2 therefore the content of the h1 and h2 elements is overlapped on the content of the p element.
The OutPut of above document:
<!doctype html>
<head>
<title>OVERLAPPING PROPERTY IN CSS
</title>
<style type="text/css">
p{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1 style="color:green;">This is the first heading tag</h1>
<p>This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
This is a Paragraph</br>
</p>
<h2 style="color:red;">Because the Paragraph has a z-index of -1, it will be placed behind the text.</h2>
</body>
</html>
The z-index property is set to -1 for the p element. Then the p element is placed beneath the two heading elements h1, h2 therefore the content of the h1 and h2 elements is overlapped on the content of the p element.
The OutPut of above document:
No comments:
Post a Comment