Element Position:
The Position Property
The next property to explore as we learn how to build layouts is position (position: ).
The position property allows developers to specify how elements are positioned in the browser window.
Box Offset Properties
The position: property sets the type of “layout flow” elements will follow. When set to a value that allows for the relative or specific positioning of elements, developers can use the following “box offset properties” to set those positions;
top:bottom:left:right:
Depending on the value of the position: property, these will act in different ways. However, they basic function serves to set the position of an element, through either relative units (i.e. em, %) or absolute units (i.e. px).
Normal Flow
The default value for position is static (position: static;). Which causes elements to follow the “normal flow”. When you use HTML block level elements (i.e. <p>, <h1>, <div>, etc.), these follow static flow by default.
Relative Position
Setting the position property to “relative” (position: relative;) allows developers to specify an amount off of the normal flow position. Rather, when an element is set to relative, it will still follow normal flow, but can be moved, relative to that position.
NOTE: This does not effect the position of surrounding elements. These other elements will continue to be positioned where they would in normal flow. This is true even if the altered element is positioned over them.
In the below example, notice how the top: and left: properties are used to move the second paragraph to the lower-right of where its
normal flow” position would have been.
"Position: Relative" Example
Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.
Notice that this paragraph is moved relative to where it would normally be positioned. This movement is so great that it is overlapping the paragraph below it. Also note that the amount of space the paragraph would have taken up in "normal flow" is still reserved.
Proident nulla ut velit occaecat non est officia eiusmod ut Lorem laborum irure exercitation non enim. Tempor duis amet eiusmod sint ipsum id tempor nostrud magna ea incididunt laborum. Non in adipisicing voluptate consequat irure amet aute enim eu sit velit veniam cupidatat non minim. Est laboris cupidatat do mollit proident fugiat cupidatat magna anim magna deserunt exercitation aliquip. Voluptate magna elit qui elit ea enim proident.
Absolute Position
Setting the position property to ‘absolute’ (position: absolute;) allows developers to specify exactly where on a page an element should be located. This can be accomplished using the position properties mentioned above.
Setting an elements position to ‘absolute’ also has the effect of taking it “out” of the normal flow. This means other elements will not reserve space for this element.
In the following example, the second paragraph is placed 20 pixels from the top and 100 pixels from the left, regardless of what the other elements are doing or where they are positioned. As a result, this paragraph (.absolute-element) is positioned “on top” of the other elements.
"Position: Absolute" Example
Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.
I am placed wherever you want.
Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.
Fixed Position
Setting an element to “fixed position” (position: fixed;) is similar to using “absolute position” in that the position is in relation to the browser, instead of any parent elements. Unlike absolute position though, fixed position is in relation to the “viewable” portion of the browser. This means, that even when you scroll, an element set to “fixed” will remain viewable in the browser window.
This property can be used for “sticky” headers or other elements that you want always visible to the user.
Notice in the following example, that when you scroll, the “fixed element” stays put.
Fixed Header Example
Using the fixed position also allows you to develop headers or menu bars that are “sticky”. Study the following example for how to create a “sticky header and menu”.
Notice, that when you scroll the below example, the header stays in place. Also notice, that in order to accomplish this look, we have to move the .main-content container down, so that it does not appear behind the header.
{ TODO: }
- Open the example in a separate tab and observe a full page sticky menu.
- Read pages 358-368 of Chapter 15 in Duckett.