.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
CSS - Position Property
CSS can be used to position elements in HTML.
- Static Positioning - HTML elements are positioned static by
default; always positioned according to the normal flow of the page. Static positioned elements are not affected by the
top, bottom, left, and right properties.
Example: Static Positioning stays in the same position even with a top and left properties. See the CSS code below:
.pos_static {
position:static;
background-color:#FF0;
top:650px;
left:320px;
} - Fixed
Positioning - An
element with fixed position is positioned relative to the browser window.
Notice the red block to the right. Scroll down and you will see that it
stays in the same position.
Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.
Example: Fixed position Make sure you scroll down; this text will stay in the same position.
.pos_fixed {
position:fixed;
top:650px;
left:320px;
background-color:#F93;
}
- Relative
Positioning -
positioned relative to its normal position. See the example is positioned
50px from the top and 50px from the left of its normal position. CSS
Positioning Properties
Example: Relative Positioning Notice it is down 10px and left 80px from where you would expect it to be.
.pos_relative {
position:relative;
background-color:#09F;
top:10px;
left:80px;
}- Can be moved and overlap
other elements
NOTE: the reserved space for the element is still preserved in the normal flow. - Relatively positioned element are often used as container blocks for absolutely positioned elements.
- Can be moved and overlap
other elements
- Relative Positioning Left - relative positions can be moved left or right
or top or bottom
Example: Position: left
See how the example is moved left
.pos_left {
position:relative;
left:-50px;
background-color:#09F;
} - Absolute Positioning -
positioned relative to the first parent element
that has a position other than static. If no such element is found, the containing
block is <html>. This example is located 50px from the top of this
page and left 50px.
Example: Absolute Positioning
.pos_absolute {
position:absolute;
background-color:#0f0;
top:50px;
left:50px;
}- Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
- Can overlap other elements.
- Overlapping Elements - The z-index property
specifies the stack order of an element
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top- An element can have a positive or negative stack order:
img {
position:absolute;
left:0px;
top:0px;
z-index:-1
} - An element with greater stack order is always in front of an element with a lower stack order
- An element can have a positive or negative stack order:
CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| left | Sets the left margin edge for a positioned box |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |
Page last updated: May 31, 2012 10:25 AM
It is all about:
Content and Navigation...
Content and Navigation...