Recommended
More Related Content
What's hot
What's hot (20)
Similar to CSS Positioning Elements.pdf
Similar to CSS Positioning Elements.pdf (20)
More from Kongu Engineering College, Perundurai, Erode
More from Kongu Engineering College, Perundurai, Erode (20)
Recently uploaded
Recently uploaded (20)
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>