Positioning Elements On A Webpage With The CSS Position Property
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!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
