The position CSS property is one of the most important layout properties to know as a beginner web developer. With it, we can control the position and the "place" of the elements in the natural flow of the document, and even it's behavior. The different position values control the behavior of the element in the page, and the top, right, bottom, and left control the location of the element. In addition to them, the z-index property can help us to create a stack of elements, meaning "behind" and "over" each other.
There are 4 types of positions:
Static elements: These are all the HTML elements by default, we can say that a static element, is an element that is not positioned.
Relative positioned: These are elements that are positioned as relative, meaning they are still part of the natural document flow, and they take up space, but they can be moved to some other place with the use of top, bottom, left, right, and z-index properties.
Absolute positioned: These are the elements that are positioned as absolute or as fixed. These elements are taken out of the natural flow, which means they do not take space in the document and are positioned by the top, right, bottom, right, and the z-index properties.
Sticky positioned: These are the elements that are positioned as sticky. These elements are a combination of relative and fixed positions. At first, it gets treated as a relative element, until it gets to a certain threshold in the parent container, from that point it will behave as a fixed element and will be stuck to the screen until we move past the parent container element.
position: static
This is the default value of every HTML element, it is said that statically positioned elements are not positioned. A static element is not affected by the top, right, bottom, left, and z-index properties.
position: relative
This property allows us to take the element and offset it with the top, bottom, left, and right properties without affecting other elements. The element is not taken out of the natural flow of the document, so it takes the space in it as if it was static.
position: absolute
This property will take the element completely out of the document natural flow, so even the space that the element should have in the flow will be taken by other elements.
The final position of the element will be determined by the top, left, right, and bottom properties.
The position of the element will be relative to the closest positioned ancestor, and if not found any, it will be relative to the HTML root element.
position: sticky
This property will behave like the relative property, it means it has its own place in the natural flow in the document. To make it behave like a sticky element, we have to add also the threshold in which it will behave like it, we do is using the top and bottom properties for parent elements with a scroll in the y-axis and the left and right properties for the parent element that has a scroll in the x-axis. This property will make the element stick to that place in the screen as long as the parent element is visible, or we reached the threshold we declared.
Notes:
The sticky property is not supported by IE at all, and it has many other conditions that may cause it not to work, so please be aware of the limitations when using this property.
position: fixed
This property acts like the absolute, it takes the element out of the natural flow, and its space gets taken by other elements. This property lets us place an element on a fixed place on the screen, the difference between fixed and absolute is that in fixed, the element stays in the same place even if the user scrolls.
The position of the element will be relative to the container which is established by the viewport.
The directional properties
The directional properties can be categories into 3 groups, horizontal properties - left and right, vertical properties - top and bottom, and the depth property - z-index.
top property
The top property lets us specify the vertical position of the positioned element, from the top perspective. It has different effects based on the position value of the element.
- static: The top property does not affect the element.
- relative: It controls how much to move the element down (away from the top) relative to the elements' original location.
- absolute and fixed: It controls the distance between the element's top edge and the top edge of the containing block.
- sticky: It sets the point for the element where it should become sticky in it's containing block.
bottom property
The bottom property lets us specify the vertical position of the positioned element, from the bottom perspective. It has different effects based on the position value of the element.
- static: The bottom property does not affect the element.
- relative: It controls how much to move the element up (away from the bottom) relative to the elements' original location.
- absolute and fixed: It controls the distance between the element's bottom edge and the bottom edge of the containing block.
- sticky: It sets the point for the element where it should become sticky in it's containing block.
Notes:
In case both top and bottom properties are used, the position property is set to absolute or fixed and the height of the element is not specified, both the top and bottom properties will be used to stretch the element vertically.
In any other case, the top property will be used to place the element and the bottom property will be ignored.
right property
The right property lets us specify the horizontal position of the positioned element, from the right perspective. It has different effects based on the position value of the element.
- static: The right property does not affect the element.
- relative: It controls how much to move the element left (away from the right) relative to the elements' original location.
- absolute and fixed: It controls the distance between the element's right edge and the right edge of the containing block.
- sticky: It sets the point for the element where it should become sticky in it's containing block.
left property
The left property lets us specify the vertical position of the positioned element, from the top perspective. It has different effects based on the position value of the element.
- static: The left property has no effect on the element.
- relative: It controls how much to move the element right (away from the left) relative to the elements' original location.
- absolute and fixed: It controls the distance between the element's left edge and the left edge of the containing block.
- sticky: It sets the point for the element where it should become sticky in it's containing block.
Notes:
In case both left and right properties are used, and the width of the element is not specified, both the left and right properties will be used to stretch the element horizontally.
In any other case, the left property will be used if the text direction is LtR and if the text direction is RtL the right property will be used.
Values
The values for the top, bottom, left and right properties are all the same and have the same effect.
- length: Can be negative, positive, or null. Usually, the length is a number with a length unit, such as px, rem, vh, etc'
- percentage: In the case of the top and bottom properties, it represents the percentage of the containing block's height. In the case of the right and left properties, it represents the percentage of the containing block's width.
-
auto: This is the default value for all elements. It behaves differently between relative and absolute positioned elements.
- In relatively positioned elements, if the property is auto it does not affect the element, and the element is not moved at all.
- In absolute positioned elements, each property controls the position of the element, if one of them is set to auto, then the other will decide on the position, if both elements are set to auto, the element will not be moved in that axis.
z-index property
The z-index property controls the z-axis position of a positioned element and its descendants. The higher the value the more in front the element will be, and will overlap elements with lower z-index values.
This property affects the positioned element in two ways:
- The z-axis position in its stacking context, meaning if it will overlap other elements or be overlapped by other elements.
- Establishes a new stacking context inside the element for its descendant elements.
Values
The z-index can receive two types of values, 'auto' and an integer.
- auto: This is the default value for all the elements. This will give the element the z-index value of the parent element.
- an integer: This will create a stacking context inside the element and its stack level will be '0' compared to its descendants. It will also determine the elements stack level in its own stack context.
Top comments (0)