Electric Type

Multimedia

About Us

News

Help

Introduction to CSS Positioning

Page 2 — Relative and Absolute Positioning

The new properties in the positioning draft are these: position, left, top, overflow, clip, z-index, visibility, width, and height.

We'll take a look at them all, but let's start off with position. You have two choices here. You can set it to relative or absolute (the default is relative). The relative setting works the way you'd expect a regular HTML page to flow. Things come in from the top and lay themselves out, with each element's position determined by the previous element's end point.

The absolute setting positions elements based on their distance from their parent's upper-left corner. So if you have a paragraph that isn't contained within any elements, its position is determined by the upper left-hand corner of the body. But if you've contained it within a <div> tag, the paragraph's position is determined by the upper-left corner of the <div> that contains it. This parent-child relationship allows you to make some complex pages. You could, for instance, place an absolute-styled paragraph contained within a relative-styled <div>, so you get the layout you want on a portion, while the container flows into your HTML like normal.

next page»


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.