Even though an absolutely positioned element doesn't work within a web page's flow, it is still affected by page scrolling. On longer web pages, such elements will disappear up and away with the content as you scroll down. If you have a section that you want to stay on the page no matter where you scroll, then the fixed value may be the more appropriate choice.
An element that has a fixed position can't base its location on the web page or a container since it needs to remain independent of page scrolling. So instead, it bases its location on your browser's viewport—the area in your browser where web page content is displayed. With this setup, whether at the top or bottom of your page, this element will stay in the same exact spot on your screen.
Since this renders the element independent, it can't be affected by a "position:relative" container. Actually, it is more or less irrelevant to all other elements, that is, unless you have multiple positioned elements are occupying the same space. In that situation, the issue at hand is which element appears in front of another. And that's where our next property comes into play.
But just one more thing before we get to that. See the box off to the left-bottom part of the screen with the dashed-line border? The code below is what created that box. This page has extra height added to it so you have plenty of room to scroll. Scroll up and down, and you'll see that the box doesn't budge.
|
<div style="position:fixed; left:0px; bottom:80px; width:50px; height:80px; border:dashed 3px yellow; background-color:rgba(30,30,30,0.5);"></div> |
