Now, let’s see a more complex example with the z-index property. Consider the following example:
<html>
<head>
<title>Title Here</title>
<style type=”text/css”>
#layer1 {
position:absolute;
left:250;
top:220;
width:200;
height:100;
background-color:orange;
font-family:Verdana;
font-size:13px;
z-index:2;
}
#layer2 {
position:absolute;
left:200;
top:300;
width:200;
height:100;
background-color:gray;
font-family:Verdana;
font-size:13px;
z-index:1;
}
</style>
</head>
<body>
<h2>Layer Positions</h2>
Just a normal text
<div id=”layer1″>
<b>Layer 1</b><br>
<b>My place is:</b><br>
From top : 220 px<br>
From left : 250 px
</div>
<div id=”layer2″>
<b>Layer 2</b><br>
<b>My place is:</b><br>
From top : 300 px<br>
From left : 200 px
</div></body>
</html>
Before checking the output, let’s focus on the differences between this example and the previous one. First of all, both layers are now absolutely positioned (Hint: This should make you understand the difference between absolute/relative positioning).
We also have the z-index properties here. Notice that layer 1 has a higher z-index in the code. Therefore, if they intersect (they do in this example), layer 1 will be on top of layer 2.
Now, we can take a look at the output. It should be something like this:
So, what about making some visual effects with CSS? CSS is a really powerful tool that can make this happen. For example consider the following example:
<html>
<head>
<title>Title Here</title>
<style type=”text/css”>
#layer1 {
position:absolute;
left:250;
top:220;
font-family:Verdana;
font-weight:bold;
font-size:43px;
color: maroon;
z-index:3;
}
#layer2 {
position:absolute;
left:350;
top:10;
font-family:Times New Roman;
font-weight:bold;
font-size:100px;
color: orange;
z-index:1;
}
#layer3 {
position:absolute;
left:100;
top:90;
font-family:Arial;
font-weight:bold;
font-size:93px;
color: red;
z-index:2;
}
#text {
position:absolute;
left:200;
top:100;
width:300;
font-family:Verdana;
font-size:13px;
z-index:0;
}
</style>
</head>
<body bgcolor=”White”>
<h2>Visual Effects with CSS</h2>
<div id=”layer1″>
Sheets
</div>
<div id=”layer2″>
S<br>T<br>Y<br>L<br>E
</div>
<div id=”layer3″>
Cascading
</div>
<div id=”text”>
Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here.Any text can come here.Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here. Any text can come here.
</div>
</body>
</html>
The output should be something like this:
Tags: Layers (Part 2)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Laisser une réponse