Layers makes an HTML document much more interesting, not to mention fun! Well, atleast from a die-hard web designers point of view. To understand this tutorial, you must have a basic working knowledge of CSS and DHTML; and understanding DHTML means you should have a working knowledge of Javascript and DOMs and how they interact with CSS. If not, I would recommend reading some beginners tuts or books. If you have a basic understanding of these, then let's begin.
So what are layers? These can be explained as an HTML document on top of another by means of a z-index. A z-index can be defined as a "level". So to simply apply a layer, you would give it a certain level. Typically, layers begin at "zero" however, it really doesn't matter which level you start a layer on. Here's how a z-index would be coded;
z-index: 0;How are layers applied? They are applied within the DIV tags. I won't explain what these are since it's covered in my other tutorial, Working with DIVS. But for those who aren't too familiar with CSS, here's a simple code below;
<div style="position: absolute; z-index: 0; width: 100px; height: 100px; background-color: #ff0000;">Take note that the above snippet is "inline" CSS. For a visual demonstration, take that snippet above and toss it into a new HTML document, you'll see that it creates a small red 100 x 100 px box....or properly put, a div layer. As well, it's position would be in the upper-left hand corner of your screen. Now take that same code and paste a copy of it right below the first one except, change the z-index: 0; to z-index: 1; and as well, change the background-color to a blue..(#0000ff). Refresh your document and you'll see that the newly created layer, which is the blue one, is right on top of the red one. Why is that you wonder? Two reasons. One, the second div you created has a higher index level...of course, "1" is greater than "0". Two, there were no positioning attributes assigned to either one of the divs besides the absolute position value.
Now let's toss in a few more attributes and see what we come up with. The first thing I will show you is "relationship" positioning. That is done through the, position: absolute; of both layers. Again, I won't explain what these do since I cover it in my Working with DIVS tutorial. To show you how it works, for both layers change the position from absolute; to relative; and on the second layer...(blue one), toss in, left: 100px; somewhere between the double-quotes of its style, then finally, refresh the page. If done correctly, you should see your layers as shown below;
As you can tell, the blue layer is to the left of the red layer by 100px and below it by the same amount. By setting the positions to "relative", it will position them "relative" to its surroundings. There are 4 values to the position: attribute. These are;
static
The static value is the default setting if there are no explicit positioning or re-positioning....the latter by means of DHTML.
To better explain this value, imagine simply looking at a plain old HTML document with no CSS or DOMs applied to it. Everything is pretty much linear.
The absolute value sets an object as an independant. It has no relation to the rest of a page unless otherwise specified.
When this value is applied and with no explicit positioning, the layer will always default at "0" of "X" and "0" of "Y" of it's parent.
An exception to that would be if a layer is created with a z-index applied while there are other objects with no z-index,
then that layer will fall onto the document in sequential order.
The relative value, as mentioned earlier simply sets a layer in relation to it's surroundings.
Finally, the fixed value. There is something to note on this one. It's buggy! It may or may not work.
As far as I've tested it, it doesn't work in Netscape 4 or 6 and IE 4, 5 or 6. It works, abit buggy for IE 5 on the Mac.
Finally for Windows, it does work for FireFox 0.7 and up, Opera 7, Netscape 7, Mozilla 1.0 and up and the other minor IE based browsers such as Maxthon;
For Linux it works in FireFox 1.0, Opera and the Mozilla/Debian 1.0 and up.
In addition to the position: attribute and its values, there are 4 other attributes that can be applied. These are,
left: with numeric values in px or %
top: with numeric values in px or %
right: with numeric values in px or %
bottom: with numeric values in px or %
Finally, there is also the Float attribute. This one is quite unique and probably one of the better positioning attributes of CSS. To simply put, float will make a DIV, or another object such as an image, "float" horizontally & sometimes vertically within it's containing parent, independant of it's surroundings. If you notice, "sometimes vertically" is said. The reason for this is if an object is set with a float attribute, it's "verticle" position will be dependant on its own Position attribute and the positioning of the objects right above it. There are 3 values for float. These are:
left
right
none
<div style="position: absolute; float: right; z-index: 0; left: 200px; top: 25%; width: 100px; height: 100px; background-color: #ff0000;">
Hello World!
</div>
<div id="div1" style="position: absolute; z-index: 0; top: 10px; left: 0px; width: 100px; height: 100px; background-color: #ff0000;">
Hello World!
</div>
<script language="javascript" type="text/javascript">
function alpha() {
if(screen.width==800 || screen.height==600) {
document.getElementById('div1').style.top="50px";
}
}
</script>
<script language="javascript" type="text/javascript">
function alpha() {
if(screen.width==800 || screen.height==600) {
document.getElementById('div1').style.top="50px";
document.getElementById('div1').style.left="100px";
}
}
</script>
Find more articles & tutorials here
