CSS can be used to position HTML elements as one of the following: static, relative, fixed, absolute, or sticky, and also define the stack order of an element.
Position
Static
An element with the position set to static is not affected by the top, bottom, left, and right properties, and are always positioned according to the natural flow of the page. Basically the sit where there is room for them to fit after the previous element and before the next.
This is the default and doesn’t need to be specifically written in a rule unless to overcome a previously set CSS rule.
div {
position: static;
}
Relative
An element with the position set to relative is positioned in relation to its natural (static) position.
Setting the top, right, bottom, and left properties causes the element to be adjusted from its natural position.
div {
position: relative;
top: 20px;
left: 5%;
}
Fixed
An element with the position set to fixed is positioned relative to the viewport and will remain set in that position even if the page is scrolled. For instance, the following example sets a bar that will sit along the bottom of the screen and stay there even when the page is scrolled.
The top, right, bottom, and left properties are used to position the element.
div {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left: 0;
}
Absolute
An element with the position set to absolute is positioned relative to its parent element, and will remain in that same position in its parent even as the page is scrolled and the parent is scrolled up or down the page (it moves on the page, but stays absolutely positioned in the parent).
The top, right, bottom, and left properties are used to position the element.
div {
width: 200px;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
Sticky
An element with the position set to sticky is positioned based on the user’s scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport and then it “sticks” in place (similar to fixed).
The top and bottom properties are often used to set the spot where the element will become sticky.
The example code below will position the element wherever it naturally sits on the page with elements coming before and after it (relative), and it will scroll with the page until it hits the top position of 0px. Then it will stick in place at that point as the page and the elements following it continue to scroll past it.
div {
position: sticky;
top: 0;
}
Z-Index
When elements are positioned, they can also sit on top of or fall under other elements.
The z-index property specifies the stack order of an element, and can have a positive (sits over other elements) or negative (falls under other elements) value. z-index is like layers on the page.
Elements with no z-index value set, are said to be z-index: auto (value of 0).
/* the element will sit over of any elements that have a lesser
value z-index and underneath any that have a greater z-index */
div {
z-index: 5;
}
/* the element will sit underneath any elements that have a
greater value z-index or have no z-index value set (default) */
div {
z-index: -1;
}
In the following example, the blue box comes after the red box in the HTML code. It has negative top margin which should pull it over the red box.
But each item has been given a relative position, and we applied a z-index of 1 to the red box to pull it over the blue box. This gives us our layered effect.
Properties
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
