Absolute position moves an elements in relation to it's nearest positioned parent or ancestor. An element is positoned if it's anything other than static. If there isn't an element that is positioned on the page then it uses the body as it's ancestor. The offset properties work as they do with relative positoning. The other elements on the page behave as if the positioned element didn't exist and take up the remaining space.
This time the orange div has been moved with absolute positioning. Notice that the other divs moved to fill the space. Since the orange box is the only element that is positioned, it's position is relative to the body of the page. This becomes a problem in this case, because when the screen is resized, the element will maintain that relationship. (The z-index ensures that the orange div will stay beneath other elements on the page if they overlap.)