Layers are one of the most important subjects in CSS. So, what are they? Imagine a magazine. You have several sheets that are stacked on top of each other, right? The sizes, shapes and design of these sheets can be different. Layers are quite similiar to these sheets. You can change the position, size and design of them. So, let’s now see the properties of a layer.
There are a lot to understand this, so we’ll go one by one with examples. First, let’s see how we will position a layer. 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;
}
#layer2 {
position:relative;
left:200;
top:300;
width:200;
height:100;
background-color:gray;
font-family:Verdana;
font-size:13px;
}
</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>
Notice that while one of the layers is absolute-positioned, the other one has a relative positioning. The difference between absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position in the document.
That is, the element still obtains a space in the document after it is positioned. You can see this by resizing the browser window.
Here’s what the above code should look like:
To understand positioning (especially the relative/absolute difference) better you should make small changes to the above example (by using the properties table) and see how your changes affect the output.
Tags: LAYERS (PART 1)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
One comment
Leave a reply