g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Positioning Elements On A Webpage With The CSS Position Property

Guest Author - Diane Cipollo

Before Cascading Style Sheets, you were limited in the control you had over the position of objects on your webpage. You could use the HTML table to control the positioning slightly but this wasn't very precise. Now with CSS, you can have precise control over how each element is place on your webpage.

Before you can use the CSS position property to position elements on your webpage, we need to discuss the terminology used to communicate with the web browser. CSS not only considers the width and height of you webpage but also the dimensions of the web browser.
  • Browser Width and Height
    At first, you might think this refers to the open browser window. But it really refers to the entire browser including the controls and buttons.

  • Live Width and Height
    This is the term for the browser's display area. It does not include the controls.

  • Document Width and Height
    This is the entire width and height of your webpage. If these dimensions are larger than the Live width and height, then the browser will display scrollbars as needed.
Now that you know the terms for the boundaries in which you can position the parts of your webpage using CSS, let's take a look at the four position values.
  • Static
    This is the default. Unless you specify otherwise for an element, the browser will use static positioning. Just as it sounds, with static positioning you cannot reposition elements on the webpage. So how does the browser determine where to put each object on your webpage? It positions each element in the order that they occur in your HTML code. If you have a logo image, then a salutation and then the copyright notice in your HTML, the browser will place these on the webpage in that order. You cannot move the salutation above the logo image.

  • Relative
    Relative positioning works the same as static in that the order of the elements in the HTML code controls the flow of the elements on the page. However, you can use relative positioning to control the position of an element in relation to the other elements on the webpage.

  • Absolute
    When you use absolute positioning with an element, this will make that element independent of the rest of the webpage. Because it's placement is no longer determined by the order of the HTML, you will need to use X and Y coordinates to position the element.

  • Fixed
    This works the same as absolute positioning. However, the element that has fixed positioning will not scroll with the webpage. This is a nice feature to use for a logo or menu that you wish to remain visible as the page scrolls upward.

This site needs an editor - click to learn more!

Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Twitter Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Facebook Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to MySpace Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Del.icio.us Digg Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Yahoo My Web Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Google Bookmarks Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Stumbleupon Add Positioning+Elements+On+A+Webpage+With+The+CSS+Position+Property to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor