View Source: Techniques: Positioning HTML Elements: Cascading Style Sheets Positioning

★ wanayoo — archive 1999 http://developer.netscape.com/viewsource/angus_css.html

POSITIONING HTML ELEMENTS

CASCADING STYLE SHEETS POSITIONING

By Angus Davis

Send comments and questions about this article to View Source.

Since the advent of the Web, many developers have been frustrated by the medium's inability to handle precise page layout and positioning. Now, thanks to Netscape Communicator's more sophisticated techniques for handling positioning, you can position any HTML element or group of elements "absolutely."

Netscape Communicator supports positioning based on a working draft currently before the W3C called Cascading Style Sheets Positioning. The techniques outlined in the draft, which are usually referred to as CSS-P, allow you to position HTML elements absolutely; more importantly, all of its properties are exposed to the Document Object Model in JavaScript 1.2, allowing you to dynamically change the position and appearance of any element or group of elements positioned with CSS-P.

This article will explain how to use CSS-P and the properties it exposes to JavaScript. In order to work with the examples I've provided, you'll need to use Netscape Communicator. This article assumes basic familiarity with style sheet syntax as set forth in the CSS1 standard, which is fully supported in Netscape Communicator.

Dynamic HTML: Four Concepts Under One Name
Many developers are confused about what exactly the term Dynamic HTML encompasses. To the end user, Dynamic HTML means visually appealing, cutting-edge Web content that moves, animates, and comes to life on the screen. Many users may prefer the immersive, animated nature of Dynamic HTML content to earlier, static content, and thus be drawn to sites enabled with the technology.

From a developer's standpoint, Dynamic HTML -- no matter who's talking about it -- refers to four ideas or key concepts:

HTML 3.2: lingua franca of the Internet for containing information documents
Style Sheets: used to separate style information from document content
JavaScript: a ubiquitous, powerful, lightweight, scripting language for the Internet
Document Object Model: a means of exposing HTML and style sheets to JavaScript

Netscape Communicator supports all of these concepts and presents them to the end user under the blanket term Dynamic HTML. If you're a developer interested in building crossware applications that use Dynamic HTML, you'll need to understand and be able to apply all four of these concepts.

This article gives you the tools you'll need to understand positioning of any HTML element or group of elements through CSS-P. I'll also discuss how the style-sheet-based positioning properties are reflected in JavaScript through the Document Object Model.

Absolute Positioning Overview
With absolute positioning, you can specify the actual coordinates within your document where you want content to appear, in any unit supported by CSS, whether it be pixels, points, ems, x-height, or a percentage value (a complete list of units is available in the CSS recommendation section on units).

CSS-P allows you to specify four types of positioning information about any HTML element or group of elements designated by a tag such as <DIV> or <SPAN> or other containers:

Horizontal and vertical position
Z-order, that is the way various elements overlap one another
Visibility of the positioned element, that is whether the element is hidden or visible
Clipping shape (currently only a rectangle) and size of the visible element within the positioned area

Getting Style into Your Document
Most examples in this article enclose traditional HTML content in a universal container, such as <DIV> or <SPAN>, that carries with it no formatting properties of its own. CSS-P defined in the head of the document applies style to those elements contained between<STYLE>and </STYLE> tags.

A quick overview of where you can put style sheet definition shows that there's a remarkable similarity between the way you use them and how you use JavaScript code:

"Inline," inside the actual tag getting style through the STYLE attribute
At the head of the document, between <STYLE> tags
In a separate file, referenced using the <LINK> tag

Horizontal and Vertical Control
CSS-P defines two properties, left and top, that are relative to the distance from the left-most, top-most corner of the document window. If the element is contained within other absolutely positioned elements, the left and top properties specify the distance relative to the left-most, top-most corner of the parent element.

For example, the code in Example 1, below, positions some text 300 pixels over and 100 pixels down from the left-most, top-most corner of the window.

Example 1

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#Foo {position: absolute; left: 300; top: 100}
</STYLE>
<BODY>
<DIV ID="Foo">
Look at me! I'm positioned with CSS-P!
</DIV>
</BODY>
</HTML>

You'll notice that in Example 1, I used the position property and designated its value as absolute. Whenever you're specifying absolutely positioned elements, you'll need to use this definition. Explaining the intricacies of other types of positioning is beyond the scope of this article, but they're explained fully in the CSS-P Working Draft.

Establishing a Z-Order
Using the left and top properties, it's possible to specify where elements should appear in a two-dimensional plane. You can also use these properties to let multiple elements occupy the same area, perhaps overlapping one another. Through use of the CSS-P Z-index property, you can specify and order overlapping content.

When Z-order is not explicitly set through a CSS-P Z-index definition, elements are displayed back to front in the order they appear in the HTML code. Z-index is generally an integer; the higher its value, the closer it is to the front in the Z-ordered plane.

In Examples 2 and 3, below, you can see two different scenarios where the words mind and matter are displayed on the screen. In Example 2, the word matter appears over the word mind, because matter has a higher z-Index value. However, in Example 3, I specify a new Z-order whereby mind is assigned aZ-indexof 2, and matter a z-Index of 1, in effect delivering mind over matter. Note that I've used a background color in the examples to help illustrate the point.

Example 2 <HTML>
<HEAD>
<STYLE TYPE="text/css">
#matter {position: absolute; left: 100; top: 100; background: red; z-Index: 2;}
#mind {position: absolute; left: 105; top: 105; background: blue; z-Index: 1;}
</STYLE>
<BODY>
<DIV ID="mind">
<h1>Mind</h1>
</DIV>
<DIV ID="matter">
<h1>Matter</h1>
</DIV>
</BODY>

Example 3

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#matter {position: absolute; left: 100; top: 100; background: red; z-Index: 1;}
#mind {position: absolute; left: 105; top: 105; background: blue; z-Index: 2;}
</STYLE>
<BODY>
<DIV ID="matter">
<h1>Matter</h1>
</DIV>
<DIV ID="mind">
<h1>Mind</h1>
</DIV>
</BODY>

In these examples, elements are positioned not only through horizontal and vertical controls in a two-dimensional plane, but also in a Z-order. This is a powerful new way of thinking about HTML content, because overlapping elements allow you to use the third dimension to cram more content into smaller spaces.

While overlapping offers some of the functionality you need to display some portions of a document more prominently than others, it would be helpful to have the ability to completely "disable" the rendering of an element, thus making it invisible to the end user. The next set of CSS-P properties I'll discuss delivers that feature.

Controlling Visibility of Elements
Style sheets have the ability to control all sorts of factors that act as variables in document display. Using the CSS-P visibility property, you can make any element or group of elements invisible. This enables your application to selectively display different parts of a document over time when used in combination with the Document Object Model exposed to JavaScript.

The visibility property can be assigned one of three values:visible, hidden, or inherit. The inherit value will simply defer visibility to the element's parent; in most cases, the parent element is the document body itself, which is always visible. In Example 4, below, I've made our familiar text displayed in Example 1 invisible simply by setting thevisibilityproperty's value to hidden. If you choose to "see" this demo in action, you'll be left with a blank page, because the element is invisible.

Example 4

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#Foo {position: absolute; left: 300; top: 100; visibility: hidden}
</STYLE>
<BODY>
<DIV ID="Foo">
Look at me! I'm positioned with CSS-P!
</DIV>
</BODY>
</HTML>

The real usefulness of this feature becomes apparent when you change it dynamically. Because all CSS-P data is reflected to JavaScript through the Document Object Model, you can change the visibility property value at will. We'll look into using the Document Object Model later in this article, in the section "Exposing Style Sheets to JavaScript."

Controlling the Clipping Region
In an absolutely positioned element, the clipping region defines the part of the element that's visible. It doesn't affect in any way the layout of the document; it only controls the way the element's contents are displayed. Today, all clipping regions are rectangular, although CSS-P was written with future nonrectangular shapes in mind. Essentially, the clipping region defines the width and height of the rectangular area displaying the element in your document.

To specify a clipping region using CSS-P, you need to supply coordinates that define the size of the rectangle. There are two ways of supplying the coordinates. The rectangle can be defined by four measurements: top, right, bottom, and left. It can also be defined by saying where those four values are supposed to appear with respect to the origin, that is the top-most, left-most corner. In practice, however, you'll often specify the clipping rectangle using only two values that assign the clipping width and height with respect to the origin.

In Example 5, below, I've set up two identical clones of a headline element positioned absolutely using different clipping constraints. The first headline is cut off on the bottom (vertical) portion, whereas the second example is constrained on the right (horizontal) side. I've used a background color for clarity, but this isn't essential to the code. This example demonstrates the idea of a clipping window much more clearly than any written explanation.

Example 5

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#one {position: absolute; left: 20; top: 20; clip: rect(600,20); background: yellow;}
#two {position: absolute; left: 20; top: 60; clip: rect(200,300); background: yellow;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="one"><H1>Mozilla is everyone's favorite buddy.</H1></DIV>
<DIV ID="two"><H1>Mozilla is everyone's favorite buddy.</H1></DIV>
</BODY>
</HTML>

Exposing Style Sheets to JavaScript
Every CSS-P property that you've seen is also reflected in JavaScript through something called the Document Object Model, which lets JavaScript take control over a document's style and content.

In Netscape Navigator 3.0, you may have experimented with dynamically changing an image upon a mouse rollover, as I explained in a previous View Source article, "Bringing Images to Live with JavaScript." This effort is made possible by the Document Object Model. In Netscape Communicator, many more elements in the document are accessible to JavaScript through the Document Object Model, including CSS-P properties.

Throughout our sample code, we've used an ID to refer to HTML elements. Communicator's Document Object Model reflects elements to JavaScript using that ID. For instance:

<DIV ID="foo">

is referenced in JavaScript as:

document.foo

The element shown above is exposed entirely to JavaScript through the Document Object Model. This includes the passing of any CSS-P properties that might be associated with that element. For instance, consider Example 6, which shows a simple application that reads and writes to a CSS-P property on the fly, causing the element to slide across the screen horizontally.

Example 6

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#mozilla {position: absolute; left: 5; top: 5;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
var foo;
function slide() {
document.mozilla.left+=2;
if (document.mozilla.left > (window.innerWidth-10)) clearTimeout(foo);
}
</SCRIPT>
</HEAD>
<BODY onload="foo = setInterval('slide()',20)">
<DIV ID="mozilla">I am slip, sliding away...</DIV>
</BODY>
</HTML>

In this example, JavaScript dynamically moves the CSS-P element by incrementing the left property value until the element is within 10 pixels of the window's inner border. Although this example uses some advanced JavaScript, such as setInterval(), the important message to take away is that you can dynamically change and update CSS-P properties, even after the page has loaded completely. (For more information on window object properties, read my recent View Source article, "Controlling the User Environment With JavaScript 1.2.")

The table "CSS-P Properties and JavaScript Counterparts" shows how CSS properties are reflected in JavaScript through the Document Object Model.

**CSS-P Properties and JavaScript Counterparts**
CSS-P Syntax	Reflected to JavaScript as:
#foo { left: 100; }	`document.foo.left = 100`;
#foo { top: 100; }	`document.foo.top = 100;`
#foo { z-Index: 1; }	`document.foo.zIndex = 1;`
#foo { visibility: hidden }	`document.foo.visibilty = "hidden";`
#foo { clip: rect(1,2,3,4); }	`document.foo.clip.top = 1;` `document.foo.clip.right = 2;` `document.foo.clip.bottom = 3;` `document.foo.clip.left = 4;`

In addition to the properties that are carried over from style sheets into JavaScript, there are several JavaScript methods associated with CSS-P elements when they're reflected as objects through the Document Object Model. The table "JavaScript 1.2 Methods Applying to Positioned Elements" provides a quick explanation of those methods. For a more complete analysis, visit DevEdge Online for documentation that explains how to use JavaScript to access positioned elements. Remember that all items referenced with an ID attribute in the document are objects. So, <DIV ID="foo"> is reflected in JavaScript as document.foo. A method for that object, such as moveBy(), would be scripted as document.foo.moveBy().

**JavaScript 1.2 Methods Applying to Positioned Elements**
JavaScript Method	Explanation
`moveBy(x, y)`	Changes position (left and top properties) by applying the specified deltas.
`moveTo(x, y)`	Changes position (left and top properties) to the specified coordinates within the containing element, normally the document body itself.
`resizeBy(width, height)`	Resizes clipping rectangle width and height by applying the specified deltas.
`resizeTo(width, height)`	Resizes clipping rectangle height and width to a specific size.
`moveAbove(document.foo)`	Stacks the positioned object above another object, referenced by `document.foo` (example) or some other object reference.
`moveBelow(document.foo)`	Stacks the positioned object below another object, referenced by `document.foo` (example) or some other object reference.

Although I didn't mention this in the table above, it's also possible to load entire HTML documents into a positioned element. The details behind "document embedding" can be a bit much to swallow in one sitting. There will be more information available on this topic in a future edition of View Source.

Using the Document Object Model to access CSS-P properties enables a whole new type of Web-based application that acts, moves, looks, and feels like no previous static document. In the coming month, DevEdge Online will make available sample code "widgets" that highlight these capabilities in the Dynamic HTML Resources area. Keep your eyes peeled to the sample code section for more examples soon.

The Future of Dynamic HTML
Dynamic HTML represents an exciting new medium for network-centric applications. It's important to remember that when you hear folks talking about Dynamic HTML, they're really referring to four distinct concepts. Understanding that those concepts are - simply - HTML, style sheets, JavaScript, and the Document Object Model gives you the foundation you need to understand Dynamic HTML.

Presently, Netscape is working with a W3C working group on a future standard for the Document Object Model. Netscape Communicator, shipping today, fully supports CSS1, CSS-P, HTML 3.2, and JavaScript 1.2, enabling you to build crossware applications that use Dynamic HTML now.

Take the next step by reading over the CSS-P draft for a more thorough understanding of the material. Then, apply what you've picked up from this article and other resources and let View Source know where your efforts take you. Dynamic HTML represents a great innovation that leverages your existing knowledge to present content in entirely new ways. Let us know where you need help climbing the learning curve.

Resources
CSS-P Working Draft
CSS1 Recommendation
W3C site on style sheets
DevEdge Online: Dynamic HTML

This article was reviewed by Benjamin Feinman, a Technology Evangelist on the Netscape Netcaster team. It was edited by Paul Dreyfus and Gregg Hurwitz, View Source Magazine's Assistant Managing Editor. The CSS-P Working Draft was co-authored by Netscape engineer Scott Furman, and was implemented in Netscape Communicator by an engineering team led by Vidur Apparao. Both engineers helped in the review of this article.

Angus Davis is an intern with Netscape Communications Corp., where he reports that life in cube 15196 is very exciting. When he is not focused on fulfilling company strategies involving the proliferation of dog food eating among employees, Angus likes to sail, sleep, and search for Keyser Soze. Angus serves as DevEdge Champion for the Client-Technical discussion group, and has been writing for View Source since November 1996.

(6.97)

For the latest technical information on Sun-Netscape Alliance products, go to: http://developer.iplanet.com

For more Internet development resources, try Netscape TechSearch.