Web Marketing Tool
Reseller
WMT .
CSS Position
Referred By: Web Marketing Tool
Login

Added: 05/25/2013   |   Updated: 7 Years Ago

Understanding CSS Positioning



1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

#div-1 {
 position:static;
}





2. position:relative

use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}




3. position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}



4. position:relative + position:absolute (important)

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}


We can use the position attribute to create containers for pages as well as other layouts.




DMCA.com Protection Status Authorize.net
Valid HTML! Valid CSS!


Reseller: WMT
|
Login
(502) 225-3237