The position: fixed property in CSS is a powerful layout tool that allows an element to be positioned relative to the viewport. Unlike other positioning methods, a fixed element does not move when the page is scrolled. This makes it especially useful for creating sticky headers, footers, or any element that should always remain visible during scrolling.
Key characteristics of position: fixed
1. Fixed to the Viewport: Elements with position: fixed are positioned relative to the viewport, which means they stay in the same position even when the user scrolls the page. This is different from position: absolute, which is relative to the nearest positioned ancestor.
2. Fixed elements are removed from the normal document flow. This means they do not affect the position of other elements on the page, nor are they affected by surrounding elements.
3. You can use the top, right, bottom, and left properties to specify the exact position of the fixed element relative to the viewport.
4. Fixed elements can have a z-index property to control their stacking order relative to other positioned elements. A higher z-index means the element will appear on top of other elements.
fixed-position.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Position: Fixed Example</title> <style> body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; background-color: #f9f9f9; /* Light background for better contrast */ } header { background-color: #4caf50; /* Green background */ color: white; /* White text */ padding: 15px; /* Padding around the header */ text-align: center; /* Centered text */ position: fixed; /* Fixed positioning */ top: 0; /* Aligns with the top of the viewport */ width: 100%; /* Stretches across the viewport */ } footer { background-color: #4caf50; /* Green background */ color: white; /* White text */ padding: 15px; /* Padding around the footer */ text-align: center; /* Centered text */ position: fixed; /* Fixed positioning */ bottom: 0; /* Aligns with the bottom of the viewport */ width: 100%; /* Stretches across the viewport */ } .content { padding: 80px 20px 60px; /* Space for header and footer */ background-color: lightblue; /* Light blue background for content */ } .box { background: #e7e7e7; /* Light gray background for boxes */ border: 1px solid #ccc; /* Border for the boxes */ margin: 15px 0; /* Space between boxes */ padding: 15px; /* Padding inside boxes */ border-radius: 5px; /* Rounded corners */ } h1 { margin: 0; /* No margin for the heading */ } p { margin: 10px 0; /* Margin for paragraphs */ } </style> </head> <body> <header>Sticky Header</header> <div class="content"> <h1>Understanding Position: Fixed</h1> <p>The header and footer below remain fixed on the viewport while you scroll through the content.</p> <p>Scroll down to see the effect of fixed positioning!</p> <!-- Repeated content for scrolling --> <div class="box">Content Box 1</div> <div class="box">Content Box 2</div> <div class="box">Content Box 3</div> <div class="box">Content Box 4</div> <div class="box">Content Box 5</div> <div class="box">Content Box 6</div> <div class="box">Content Box 7</div> <div class="box">Content Box 8</div> <div class="box">Content Box 9</div> <div class="box">Content Box 10</div> <div class="box">Content Box 11</div> <div class="box">Content Box 12</div> <div class="box">Content Box 13</div> <div class="box">Content Box 14</div> <div class="box">Content Box 15</div> <div class="box">Content Box 16</div> <div class="box">Content Box 17</div> <div class="box">Content Box 18</div> <div class="box">Content Box 19</div> <div class="box">Content Box 20</div> </div> <footer>Sticky Footer</footer> </body> </html>
Above snippet generate below screen.
Just scroll to understand the behavior.
Previous Next Home
No comments:
Post a Comment