| [CSS Tutorial] Understanding Position in CSS; Vector Series: http://s4.zetaboards.com/vector/topic/8729236/1/#new | |
|---|---|
| Tweet Topic Started: Thursday, 24. November 2011, 11:34 (651 Views) | |
| Andrew | Thursday, 24. November 2011, 11:34 Post #1 |
![]()
ぼくたちがすべてはばか。
|
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. 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? 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...
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 | Thursday, 1. December 2011, 04:50 Post #2 |
![]()
BAMMMMM!
|
Outline Documentations T H E M E S Documentation accepted in to the Themes database |
![]() 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 » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi








^




8:15 PM Jul 10


Outline Live