Some months ago when i started writing CSS i got to a point where i wanted to move elements and i was tired of using only the CSS Margin property, so i was introduced to CSS positioning by my tutor, it was rough at the onset but with much effort, reading and practice i got to love and understand it better, So i decided to write about it and share my knowledge to all.
CSS Position
CSS position property as the name says, can help you change how elements is positioned on the web page.
With CSS position you can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative or away from its natural position in the page or absolute based on its parent element and many more.
Syntax:
The syntax for the position CSS property is:
position: value;
Now i will love to identify the various types of CSS positioning related properties.
Types of CSS Position Property
- Relative
- Absolute
- Fixed
- Sticky
- Static
- Initial
- Inherit
Now that we have listed the various CSS position properties, we will talk more about the two most commonly used position properties - relative and absolute
Position Relative
The relative property helps you position HTML element away from or relative to its original or natural position on the web page.
After setting the position of an element relative without adding any other positioning attributes such as (top, left, right, bottom) nothing will happen, but immediately you add the attribute left: 50px; the element moves 50px away from its original position on the web page.
Example:
In this example, you will see how the relatively positioned div element moves when its attributes are changed. The element moves to the left and top from its normal position
HTML5:
<div class="parent">
<h1>position relative</h1>
</div>
CSS:
.parent{
position: relative;
left: 500px;
top: 100px;
}
Position Absolute
position absolute allows you to place an element any where on the web page.
When an element is positioned absolute the element is removed from the normal flow of the document and other elements will behave as if it’s not visible.
You use the positioning attributes top, left, bottom, and right to set the location.
Example1:
In this example, you will see how the absolutely positioned child element moves when its attributes are changed. The element moves to the left and top from its parents position.
HTML5:
<div class="parent">
<h1>position relative</h1>
<div class="child">
<h2>position absolute</h2>
</div>
</div>
CSS:
.parent{
position: relative;
left: 500px;
top: 100px;
}
.child{
position: absolute;
top: 10px;
left: 10px;
}
Example2:
In this example, you will see how the absolutely positioned child element moves when its attributes are changed. The element moves to the left and top from the default html element itself disrupting the flow of the webpage.
HTML5:
<div class="parent">
<h1>position relative</h1>
<div class="child">
<h2>position absolute</h2>
</div>
</div>
CSS:
.child{
position: absolute;
top: 10px;
left: 10px;
}
Note
when using position absolute, we want to know that the values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relative to the page itself.
Its overuse or improper use can limit the flexibility of your webpage.
Latest comments (0)