Multi
Multi
[CSS Tutorial] Understanding Position in CSS; Vector Series: http://s4.zetaboards.com/vector/topic/8729236/1/#new
Topic Started: Thursday, 24. November 2011, 11:34 (651 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
Understanding Position In CSS
Time: 10 Minutes
Difficulty: Easy



CSS positioning allows you to position an element relative to itself, your screen, and even the page itself. You can position an element using the top, bottom, left, and right CSS properties. These properties work differently, however, depending on what position type the element you are positioning is.

1. Static
Every element in a document has the position static if their position is not specified. This is the default value. Static elements are not affected by the top, bottom, left, and right CSS properties.

2. Absolute
The absolute position type positions an element relative to the first non-static parent element. Picture a coordinate grid on the parent element. The absolute position element would be positioned at (0, 0), which is the top left hand corner, with the top left hand corner of the element at (0, 0). When you use the CSS properties left and top the element coordinates increment as suspected (left, top). However, when you use right and bottom it changes completely. When you use right, the X value of (0, 0) becomes the coordinate of the right side of the parent element, essentially, the width of the element. When you use bottom, the Y value of (0, 0) becomes the height of the parent element.
Code: HTML
 
<style>
img {position: absolute; top: 50px; right: 50px;}
</style>
<img src="someimg.jpg" />
The image in our example would be positioned 50px from the top of our page, and 50px from the right of our page.

3. Relative
When an element has the position type relative then the element is positioned relative to itself. Ever wondered how buttons could move down when you clicked them?
Code: HTML
 
<style>
button {position: relative;}
button:active {top: 1px;}
</style>
<button>Click Me!</button>
Elements that have the position type relative will move based on their original location. Top will move the element X pixels from the top of the element, left will move it X pixels from the left, etc.

4. Fixed
Fixed is one of the more interesting position types and is definitely fun to play with. When an element has the position type fixed it is positioned relative to the browser window. This means that an element like so...
Code: HTML
 
<style>
html, body {height: 200%;}
div {position: fixed; top: 50px; left: 50px; border: 1px dotted #000;}
</style>
<div></div>

Would always stay 50px from the left of the browser window and 50px from the top of the browser window even when the users scrolls the page.

Well that's it, a quick synopsis of the position property. I know I kinda ran through these fairly fast so if you have any questions or comments go ahead and post them.

- - -
For the full article - http://s4.zetaboards.com/vector/topic/8729236/1/#new
Off
Profile
Quote
Top
 
Maddy
Member Avatar
BAMMMMM!
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database
Posted Image
This is a work in progress ^^

"You still talk about it? You still care about it."


Tumblr - WeHeartIt - My Things - Twitter

The List
Life
<3
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..