CSS Positioning Elements.pdf
- 1. CSS Positioning Elements Dr.T.Abirami Associate Professor Department of IT Kongu Engineering College Perundurai
- 2. CSS Positioning Elements • The positioning of an element can be done using the top, right, bottom, and left properties. • These specify the distance of an HTML element from the edge of the viewport. • To set the position by using the following properties, we have to declare the positioning method. • Fixed • Static • Relative • Absolute • Sticky CSS helps to position your HTML element. The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
- 3. • It always stays in the same place even if the page is scrolled. • The top, right, bottom, and left properties are used to position the element. • The element is positioned relative to the browser window Fixed Positioning
- 4. Fixed Positioning <html> <head> </head> <body> <div style = "position:fixed; left:80px; top:40px; background-color:yellow;"> This div has fixed positioning. </div> </body> </html>
- 5. Absolute Positioning • An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner. • You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. • The element is positioned relative to its first positioned (not static) ancestor element
- 6. <html> <head> </head> <body> <div style = "position:absolute; left:80px; top:20px; background- color:yellow;"> This div has absolute positioning. </div> </body> </html>
- 7. Relative Positioning • The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position • An element with position: relative; is positioned relative to its normal position. • Setting the top, right, bottom, and left properties of a relatively- positioned element will cause it to be adjusted away from its normal position. • Other content will not be adjusted to fit into any gap left by the element.
- 8. <html> <head> <style> div.relative { position: relative; left: 30px; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: relative;</h2> <p>An element with position: relative</p> <div class="relative"> This div element has position: relative; </div> </body> </html>
- 9. position: static; • HTML elements are positioned static by default. • Static positioned elements are not affected by the top, bottom, left, and right properties. • An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page: • This <div> element has position: static;
- 10. <html> <head> <style> div.static { position: static; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: static;</h2> <p>An element with position</p> <div class="static"> This div element has position: static; </div> </body> </html>
- 11. position: sticky; • It is positioned based on the user's scroll position. <html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p> <div class="sticky">I am sticky!</div> <div style="padding-bottom:2000px"> <p>Scroll back up to remove the stickyness.</p> </div> </body> </html>