Layout positioning is somewhat tricky to get your head wrapped around. Remember, when you begin to set position values, these block elements react differently to their space around them.
position: fixed; are placed relative to the browser viewport. Elements with
position: absolute; are placed relative to their closest parent with a position other than static (e.g., relative, absolute, or fixed).
width: 100%; on an element that has
right. The use of
width: 100%; is the same as the combined use of
left: 0; and
right: 0;. Use one or the other, but not both.
The most interesting of use cases for positioning is redefining the position of a absolutely positioned element within the context of a relatively positioned element.
For example, in order to get an absolutely positioned element to honor it's direct positioning within an element that may appear anywhere within the view, setting it's parent block element to
relative will allow that
absolute element to be aware of it's space.