Oct 11, 2015
by: Drew
Positioning Layers Positioning Layers in CSS/DHTML

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;">
Hello World!
</div>

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;
HOW THE LAYERS SHOULD LOOK

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
absolute
relative
fixed

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 %

Take note that the right: and bottom: attributes does not work on anything lower than IE 5 and Netscape 4. As far as the other more popular browsers on the different platforms, I have yet to test them. To be on the safe side, simply use the left and top attributes only. Another thing to mention is that you cannot use "opposing" attributes such as, left and right in the same line of CSS. If so, then the first of the two attributes will be considered.

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

They're pretty obvious so I don't think I need to explain what they do. A great example of using float, is positioning an image so text wraps around it. If you're familiar with the old HTML technique of aligning images, this is the same concept but much cleaner and easier.

There is yet another attribute that can be considered "positioning". This attribute is Display. However, explaining about this attribute and its values is beyond the scope of this tutorial since display has many values and browser "quirks". There would have to be a separate tutorial dedicated just to that. So now, tossing in the different positioning attributes, here's how it would look.

<div style="position: absolute; float: right; z-index: 0; left: 200px; top: 25%; width: 100px; height: 100px; background-color: #ff0000;">
Hello World!
</div>

Now comes the fun stuff. So how would you position layers via DHTML? First, let's create a scenario. Suppose you want a layer to be positioned exactly 50px from the top if the viewers screen resolution is only 800 x 600. For all other resolutions, you would want the layer to have a default top position of only 10px. To achieve this, you would need to use a combination of HTML, CSS, DOMs and Javascript....hence, DHTML. So the first step is to create your layer that is to be manipulated. Below is mine.

<div id="div1" style="position: absolute; z-index: 0; top: 10px; left: 0px; width: 100px; height: 100px; background-color: #ff0000;">
Hello World!
</div>

If you notice, I gave that div an id of div1 so that I may reference it via Javascript. Now that we've got that, let's create our Javascript to control it's top positioning.

<script language="javascript" type="text/javascript">
function alpha() {
  if(screen.width==800 || screen.height==600) {
    document.getElementById('div1').style.top="50px";
  }
}
</script>

Now I won't explain in detail the Javascript above since it will go way off course of this tutorial. In a nutshell, that script above simply looks to see if the resolution is a width of 800 or height of 600 and if so, it will call upon the "document" "object" that is referencing the "id" "div1", to change the top to a new value. You can put additional controls to manipulate more than just the top attribute, such as I have below.

<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>

Finally, to execute the Javascript function, simply put into the body tag an onload and call the function. One thing to remember is that even though you might directly prescribe positions to a layer, it can still be further manipulated with DHTML. As you continue to work and utilize positioning of layers via DHTML, you will realize that a gamut of new ways to create a layout will be opened up. Well, I hope this tutorial helped you somewhat. Until next time, happy coding!
Home|About|Services|Portfolio|WebApps|Contact|Resources
Copyright 2008 - 2017 All Rights Reserverd, Dream Designs.