Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css positioning

4,100 views

Published on

  • Be the first to comment

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;

×