An element with position: fixed; is positioned relative to the viewport (browser window), which means 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. Like the absolute element, a fixed element also does not leave a gap of white space on the page, where it would normally have been located (like the relative element does). Notice the fixed element in the lower-right corner of the page:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div.fixed { position: fixed; bottom: 25px; right: 0; width: 300px; border: border: 5px solid red; } </style> <body> <div class="fixed">This <div> element has position: fixed;</div> <p>The fixed DIV element is near the bottom of this window. This paragraph element moved into the space vacated by the DIV element.</p> </body> |
This <div> element has position: fixed;
The fixed DIV element is near the bottom of this window. This paragraph element moved into the space vacated by the DIV element. |
The fixed position is in relation to the browser's window, not to the webpage, nor to any element on the page. Resize the window to see how the fixed position is fixated to the viewport. Also, note that you don't have to use "px" if you have a 0 value.
