Positioning
Explore how to use the CSS position property to control the placement of elements on a web page. Understand the differences between static, relative, absolute, fixed, and sticky positions, and learn how each affects layout and scrolling behavior. This lesson helps you master key positioning techniques essential for responsive and dynamic web design.
The position property
In CSS, we can define the location of an element using the position property.
For example:
.element {
position: relative;
top: 10px;
}
In the code above, our element’s position is moved down 10px from the top (relative to its original position in the document).
The position property can have one of five values:
staticrelativeabsolutefixedsticky
Let’s see each in action!
The position values
The static value
Every element has a static position by default. Statically positioned elements are displayed in the normal page flow.
We have our default static layout here. The static position doesn’t need to be set as assumed.
There’s no effect if we attempt to apply properties such as top, bottom, left, orright to ...