Css positioning

3,315 views
3,191 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,315
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
102
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Css positioning

  1. 1. CSS POSITIONING & FLOATING Advanced CSS techniques
  2. 2. how to position 1. Determine the method of positioning position:static; position:relative; position:absolute; position:fixed; 2. Specify the actual numerical values for its exact coordinates left:100px; right:200px; top:50px; bottom:5px;
  3. 3. POSITION: STATIC • Default setting • Positions itself according to the “normal flow” (order of declaration of elements in the HTML, etc) • rules like left:10px; top:30%; do not work
  4. 4. POSITION: RELATIVE • Positions itself according to its default position • Still follows the “normal flow”, maintains its previous space occupied • position:relative; top:50px; left:50px; box moves 50px down (away from the top edge), and 50px to the right (away from the left edge) from its previous position
  5. 5. position: absolute • Element is removed/lifted from the container element, and positioned according to the edges of the canvas • position:absolute; top:0px; left:0px; box is attached to the upper-left corner of the canvas, not the container element
  6. 6. position: fixed • Positioned according to the browser • Remains fixed, does not scroll with the content • position:fixed; left:0; top:0; box attaches to the top-left corner, and does not move with the content when scrolled
  7. 7. floating • Floating makes objects line up in one side of its container element, and allowing other elements to flow around it • First used to wrap text around images
  8. 8. More on Floating • Objects will only float as far as its container element • When floating block-elements, always define a width
  9. 9. floating boxes • Fix dimensions .sample { .samplethree { background:yellow; background:orange; width:400px; width:400px; height:100px; height:80px; } } .sampletwo { background:pink; width:400px; height:60px; }
  10. 10. Floating with text • Add float property to the last box .samplethree { background-color:orange; width:400px; height:80px; float:left; }
  11. 11. floating boxes • Add float property .sampletwo { background:pink; also to the first width:400px; two height:100px; float:left .sample { } background:yellow; width:400px; height:100px; float:left; }
  12. 12. Float Direction • Change all to width:400px; height:60px; float:right float:right .sample { } background:yellow; .samplethree { width:400px; background:orange; height:100px; width:400px; float:right; height:80px; } float:right .sampletwo { } background:pink;
  13. 13. Clear property • Clearing an object will turn-off the floating, thus it will appear below an element that is floated in that direction clear:left; clear:right; clear:both;
  14. 14. Clear in action • Float only the first width:400px; height:60px; box .sample { float:right; background:yellow; } width:400px; .samplethree { height:100px; background:orange; float:right; width:400px; } height:80px; .sampletwo { float:right; background:pink; }
  15. 15. Clear in action • Add clear to the width:400px; height:60px; pink box .sample { clear:right; background:yellow; } width:400px; .samplethree { height:100px; background:orange; float:right; width:400px; } height:80px; .sampletwo { } background:pink;

×