<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Positioning
<CSS-P>
  spacerspacer

Positioning

Background: Positioning is a term for a specific part of Cascading Style Sheets (CSS). Positioning was first created as a special addition to the very first version of the CSS specification, meaning it came out AFTER the specification was complete. For those with little background in CSS, here is a CSS Tutorial.

This "special" addition was called at the time CSS-P, for CSS Positioning. Positioning referenced the ability to locate and move HTML elements (most commonly DIV tags containing HTML) and allow the elements to sit one on top of the other (layers). CSS-P became part of CSS specification version 2, when it was complete.

HTML Positioning: In HTML, the browser flows the content according to the default behavior of the elements, in the order they appear on the page. HTML elements either "pushed" each other out of the way, (called a BLOCKING element) and would not allow another element to sit "in-line" or next to it (like a paragraph, break, hr or table) or an element was INLINE, meaning it would allow any other element to sit beside it (like a font, image or "a" tag). With positioning, not only can items sit on top of each other, they can also move dynamically, thereby creating what is called a layer.

Positioning With CSS: For many, the primary goal of CSS was to provide efficient and consistent formatting of HTML. Another focus of CSS was to provide an alternate means for laying out the HTML elements on a page, without the use of tables.

HTML developers have a long history of using tables for layout. With the advent of CSS, 2 specific tags were created handle layout issues, the div and the span tags. Both of these tags were created with as little default behavior built into the tags as possible. The major difference is that the div is BLOCKING (creates a carriage return by default) and the span is NON-BLOCKING (or INLINE) which means it sits directly next to the previous and the next elements in line on the HTML page.

With CSS Positioning, you can specify the exact coordinates of an element in the document space, and each element can exist in it's own plane (or layer) so it can sit on top of other elements, and can be moved or removed with no effect to other elements on the page, if required.

Positioning Scope: The positioning scope of an element refers to it's position in relation to another object. The position of an object in relation to another is thought of in terms of an (X,Y) coordinate, in which X is the HORIZONTAL (x as in cross, or across) and Y is the vertical component (the tail of the "y" can be thought of as pointing downward, or vertically).

The default (0,0) coordinate on a document is the top left corner of the browser window. Once an element is identified, it can be positioned inside CSS by declaring a "left" and "top" coordinate which maps to the "horizontal" and "vertical" offset from this (0,0) coordinate in the top left of the browser window.

We can also find the coordinates of a mouse click on a page. This is convenient to help us visualize our postioned (or moving) elements on a page during development: findCoord.htm

CSS Positioning: Elements can be positioned both by CSS, (sometimes deciding a starting position on a page) and by JavaScript. Here is an example of a DIV that is absolutely positioned via CSS:

<style media="screen" type="text/css">
<!--
#cheshireCat{
position: absolute;
top: 60px;
left: 30px;
}
-->
</style>

The unique "id" is "cheshireCat", as specified by following the pound sign. In this case, the object's top left corner will be positioned 60 pixels down from the top of the screen, and 30 pixels over from the left of the screen. The object specified here will be a div tag, which can be called out inside the HTML page as follows:

<div id="cheshireCat">
<img src="images/alice31.gif" width="379" height="480" border="0">
</div>

Note the purpose of the DIV tag is to store and therefore position it's contents, an image. The DIV can be called out anywhere on the HTML page, due to it's positioning via CSS. Some developers even elect to declare a DIV thus created OUTSIDE the actual HTML page! cheshireCat.htm

Absolute vs. Relative Positioning: An absolute positioned element is removed from the rest of the page's rendering flow, regardless of it's location within the source code. This is provided the element is NOT nested inside another element! Any other HTML on the page flows as if the positioned element were not there. This does NOT effect the DOM positioning of the element, meaning the child, sibling and parent relationships are maintained, regardless of the current position on the page.

A relative positioned element effects the flow of the main document content! The default position of a "relative" positioned element is it's normal location in the flow of the document, based on where the document is "called" (printed) in the HTML document. Relative positioning can then be thought of as the DEFAULT HTML position of an element!

Relative positioned elements can be OFFSET from their default location however! When they are offset for example by setting the x and y coordinates to be different from (0,0) the original position of the element in the document is maintained, while the element is offset!

One other important feature of a relatively positioned element is that any element inside it can be given a new positioning scope based on the containing (parent) element! This means that an absolutely positioned element nested inside a relatively positioned element no longer uses the top/left coordinate of the browser window as it's reference, but the relatively positioned element it is contained inside! dropShadow.htm

Positioning Via Scripting: So far we have positioned objects on the page with CSS. This is great for establishing an initial position of an element. Once we access an object with JavaScript, we can position elements via the "style" property of an object:

Style Property Operation Example
obj.style.left Change position from left of parent (X-index) obj.style.left = "100px";
obj.style.top Change position from top of parent (Y-index) obj.style.top = "100px";
obj.style.zIndex Change stacking order (Z-index) obj.style.zIndex = 10;
obj.style.visibility Change visibility of object obj.style.visibility = "hidden";
obj.style.clip Set clipped region obj.style.clip = "rect(10px)";
obj.style.backgroundImage Change background image obj.style.backgroundImage = "myPic.jpg";
obj.style.backgroundColor Set background color obj.style.backgroundColor = "#ff00ff";

In practice, we might choose to select an object via getElementById, and then set properties of the object via it's style:

myCat = document.getElementById("cheshireCat");
myCat.style.left="300px";
myCat.style.top="250px";

Clipping: One of the properties above not covered yet is clipping, which allows the developer to hide areas of an element by clipping off the top, right, bottom and/or left sides of the object:

myCat.clip = 'rect(10px 20px 10px 20px)';

Try the following example to see a JavaScript function that clips an area around a div that contains an image: setClip.htm

The "style" properties can be read to determine their current settings, as well as set. This example reads the current settings of the element: clipDimensions.htm

Stacking Order: Just as X and Y provide the horizontal and vertical coordinates, there is a third dimension called the Z-index, which provides a third, 3-dimensional coordinate. The Z-index is a number that declares the relative position in the third dimension for "layered" or "stacked" elements. The higher the Z-index number, the closer to the front of the browser window goes the element. Elements with a lower Z-index would appear behind those elements with a higher Z-index. The Z-index can be declared in CSS, and can be changed via the zIndex property of the object via JavaScript: stackObj.htm

Why Positioning?: CSS-P forms the basis for creation of 'drop down' & 'fly out' (DHTML) menus. Later when we study menus, it will begin with our understanding of positioning & stacking order.

More!: Here's a great CSS-P tutorial by Brainjar: Brainjar CSS Positioning Tutorial

 

   
Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved