Positioning in CSS
The CSS properties that allow you to position elements manually in HTML
New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#bottom
Defines the position of the element according to its bottom edge.
default bottom: auto;
The element will remain in its natural position.
bottom: 20px;
If the element is in position relative, the element will move upwards by the amount defined by the bottom value.
bottom: 0;
If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.
#left
Defines the position of the element according to its left edge.
default left: auto;
The element will remain in its natural position.
left: 80px;
If the element is in position relative, the element will move left by the amount defined by the left value.
left: -20px;
If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.
#position
Defines the position behavior of the element.
default position: static;
The element will remain in the natural flow of the page.
As a result, it will not act as anchor point for the absolutely positioned pink block.
Also, it will not react to the following properties:
topbottomleftrightz-index
position: relative;
The element will remain in the natural flow of the page.
It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
topbottomleftrightz-index
position: absolute;
The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.
Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
topbottomleftrightz-index
position: fixed;
The element will not remain in the natural flow of the page. It will position itself according to the viewport.
Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
topbottomleftrightz-index
#right
Defines the position of the element according to its right edge.
default right: auto;
The element will remain in its natural position.
right: 80px;
If the element is in position relative, the element will move right by the amount defined by the right value.
right: -20px;
If the element is in position absolute, the element will position itself from the right of the first positioned ancestor.
#top
Defines the position of the element according to its top edge.
default top: auto;
The element will remain in its natural position.
top: 20px;
If the element is in position relative, the element will move downwards by the amount defined by the top value.
top: 0;
If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.
#z-index
Defines the order of the elements on the z-axis. It only works on positioned elements (anything apart from static).
default z-index: auto;
The order is defined by the order in the HTML code:
- first in the code = behind
- last in the code = in front
z-index: 1;
The z-index value is relative to the other ones. The target element is move in front of its siblings.
z-index: -1;
You can use negative values. The target element is move in behind its siblings.