Css positioning
?
2 likes?3,122 views
This document discusses CSS positioning and floating techniques. It covers the position property values of static, relative, absolute, and fixed and how they position elements on a page. It also covers floating elements and how the float, clear, and width properties can be used to make elements line up and flow around each other.
Css positioning
- 1. CSS POSITIONING & FLOATING Advanced CSS techniques
- 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. 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
- 5. 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
- 7. 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
- 9. 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
- 12. 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
- 14. More on Floating ? Objects will only float as far as its container element ? When floating block-elements, always define a width
- 16. 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; }
- 18. Floating with text ? Add float property to the last box .samplethree { background-color:orange; width:400px; height:80px; float:left; }
- 20. 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; }
- 22. 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;
- 24. 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;
- 26. 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; }
- 28. 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;