Cascading Stylesheets Tutorial #10
CSS Absolute Positioning and Relative Positioning
Layering Text and Images

Bookmark This Page

Cascading Stylesheets Tutorial # 10

Absolute Positioning, Relative Positioning

Absolute Position

Example code ....
<STYLE TYPE="text/css">
<!--
P { position: absolute; left: 50pt; Top: 30pt }
-->
</STYLE>

The example code above tells the browser to position the paragraph exactly 50 points from the left edge of the browser window and exactly 30 points down from the top. As the left and top edges have only been specified , the text will flow normally to the right edge and down the page.

All the normal length units, points, pixels, etc, apply and you can position text, paragraphs, images, movies, etc.

An element positioned absolutely is positioned independent of any other object on the page.

Relative Positioning

Example code ....
<STYLE TYPE="text/css">
<!--
B { position: relative; left: 60pt; top: 30pt }
-->
</STYLE>

Relative positioning means an element is relative to its natural position in the document's flow. When you use relative positioning, an element is positioned relative to where it would regularly be.

Controlling Positioned Elements.

Example code ....
<STYLE TYPE="text/css">
<!--
DIV { position: absolute; left: 200pt; top: 40pt; width: 150pt }
-->
</STYLE>

( The following width and height values only work on absolutly positioned elements.)

When controlling where the upper-left corner of an element is positioned, you can also control the width and height of the element. Using the width property, you can control how far the text flows. When the browser sees this rule, it will position the text as expected, but it will also limit the maximum horizontal size of the paragraph to 150 points.

You can use any length unit and percentage values, which refer to the parent element's width.

You can resize a graphic by setting width & height.
The height attribute works just like width, only in the vertical direction:
Example code .... DIV { position: absolute; left: 200px; top: 40px; height: 150px }

overflow ........ (Supported by Netscape later versions)

Example code ....
<STYLE TYPE="text/css">
<!--
blockquote { width: 250px; height: 150px; overflow: scroll }
-->
</STYLE>

If your content within the block-level tag is larger than the height or width that you set for it, you can control how you want it to look by using the overflow property.

This works on block-level elements, whether or not they are positioned.
Values you can choose are; visible - all content will be displayed, even if it goes outside the declared boundaries of the box.
hidden - the browser won't display part of the content that is over the boundries.
auto - the browser will display a scrollbar if needed, so the viewer can see the rest of the content.
scroll - the browser will always display a scrollbar, even if it's not required. Here's an example applied to this paragraph below.

If your content within the block-level tag is bigger than the height and/or width you've defined for it, you can decide how you want it to display by using the overflow property. This works on block-level elements, whether or not they are positioned.
Pretty cool Hey!

visibility (Not supported by Netscape)

Example code ....
<STYLE TYPE="text/css">
<!--
H1 { visibility: hidden }
-->
</STYLE>

Elements can be made invisible on the page. This works on elements whether or not they are positioned. An example for it's use is where you might want to make a paragraph or image visible only when the mouse rolls over something.

Possible values are;
visible..... makes the element visible.
hidden .....makes the element invisible.
inherit .....means it will inherit its visibility from its parent element.

Clip

Example code ....
<STYLE TYPE="text/css">
<!--
H4 { clip: rect(15pt 100pt 100pt 50pt) }
-->
</STYLE>

With clipping, you can control exactly which parts of an element are visible and which are invisible and works only on those elements that have been absolutely positioned.

Clipping only affects the display of the element so whatever you clip still takes up room on the page. Rectangle is the only shape supported so far. Everything within the clipping region will be displayed.

Clipping can be used when working with dhtml scripting, temporarily hiding or exposing elements as needed.

Other length units or percentage values can be used. A value of auto means that no clipping will occur. Negative values for clip are permitted.

Layering Text and Images

Example code ......
<STYLE TYPE="text/css">
<!--
H2 { position: relative; left: 30px; top: 20px; z-index:10 }
H1 { position: relative: left: 25px; top: -40px; z-index: 1 }
-->
</STYLE>

Overlap text and images.

You Betcha!

Overlapping text or images is great. The advantage being eliminating those bulky graphics and faster loading pages.

When positioning and overlapping multiple elements, use z-index to specify which one should appear on top. Use plain integers for the values. The higher z-index value means that is the layer that will appear on top.

Wrap your body paragraphs in either a <DIV> or <SPAN> tag to make it browser compatible. If you cannot see the overlapping text then your browser does not support.

Next tutorial, CSS Class Selectors