UX Design and Development course

Layout positioning

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 explained

Elements with 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).

Position and width

Don't set width: 100%; on an element that has position: [absolute|fixed];, left, and 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.

Combined positions

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.

Codepen.io example