Home arrow Style Sheets arrow Page 4 - Introduction to CSS Positioning Properties Part 1

Introduction to CSS Positioning Properties Part 1

Web designers gained a great deal from the CSS2 specification, especially when it comes to increased flexibility to position HTML elements exactly where they want them within Web pages. Keep reading to learn more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
February 21, 2005
  1. · Introduction to CSS Positioning Properties Part 1
  2. · Basic definitions
  3. · Inline and block boxes
  4. · CSS 2 Positioning Schemes
  5. · The "position" property
  6. · The "display" property

print this article

Introduction to CSS Positioning Properties Part 1 - CSS 2 Positioning Schemes
(Page 4 of 6 )

For the CSS2 specification, there are five styles of positioning for HTML elements. They are as follows:

Static Positioning: Static positioned elements will be displayed flowing in the normal rendering sequence of the <body> content. It’s the default behavior for HTML elements. The "top" and "left" properties are not applicable, as we’ll see in a moment.

Relative Positioning: Relatively positioned elements are positioned according to the normal flow and then moved. Elements that are rendered after a relatively-positioned element behave as if the relatively-positioned element was in its "normal flow" position, even if this means they occupy the same screen space.

Absolute Positioning: Absolutely-positioned elements are not affected by normal flow. They’re positioned by specifying the "top," "left," "right" and "bottom" properties. The element remains located in the document at the specified coordinates. However, it will scroll along with the window or ViewPort.

Fixed Positioning: Fixed-position elements work in the same way as absolutely-positioned elements, except that their position is relative to the ViewPort. As such, they don’t move if the page is scrolled -- they stay relative to the Viewport. Also, the "top," "left," "right" and "bottom" properties are applicable.

Float Positioning: Elements positioned using the "float" property are positioned using the normal rendering flow and then moved left or right as far as they can go, according to the value assigned to the "float" property, whether is left or right. Elements that appear after them will move up to fill any gap left behind, but will flow around the box, so they won’t be displayed at the same screen position.

Having defined the five styles to position elements, we should apply them using the "position" property in the following manner. We’ll see how it can be done in the next section.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials