position property is
absolute positioning will ensure the element stays in the exact same position specified in the style rule. It does not consider the flow of the page, when you resize the browser window.
Let's take a look at an example to illustrate this concept.
Say we added a block of text above our
<div> tags. Now when we refresh our browser, take a look at what happens to our
position as we scale the browser bigger and smaller.
<div> moves up and down to accommodate the text as the browser shrinks and expands.
relative positioning the
<div> moves with the flow of the page.
Now let's change the
position of our parent
absolute. Refreshing our browser, we can now see the
<div> does not consider the block of text above it. It remains in the exact
position specified in our style declaration regardless of what we do. We can re-size our browser and the
position will stay in the same place.