logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor