This type of positioning takes box out of normal flow
Other elements act as if the absolutely positioned element is not longer there
Box offset properties (top or bottom and left or right) are used to position the element
Elements positioned absolutely will be positioned relative to the nearest positioned parent element
Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.
Live Example - Containing element is “positioned”
In the example above, the containing element (box with blue border) is considered positioned because it has the following style applied to it: position: relative. This means that the absolutely positioned box (red box) will be absolutely positioned relative to the bounds of the containing element (box with blue border)
Another Live Example - Containing element is NOT “positioned”
In the example above, the containing element (box with blue border) is NOT positioned because it does not have a position property set (we commented. When this is the case, the absolutely positioned box (red box) will be absolutely positioned relative to the bounds of the entire page (or the screen). This is why the red box is no longer bounder to the containing element (box with blue border).
Another Example with two (2) containing elements