Positioning in CSS is one of the fundamental concepts that must be mastered in order to arrange elements according to the design. By understanding CSS Positioning, we can control the precise placement of elements, from their default position to their fixed position on the screen when scrolling.
What is CSS Positioning?
CSS Positioning is a technique for controlling the position of elements in HTML. With the position property in CSS, we can determine how an element is positioned relative to other elements or to the browser viewport.
The position property has four main values:
- Static (default)
- Relative
- Absolute
- Fixed
Static Position
Static Position is the default value for all HTML elements. Elements with the static position will be displayed following the normal document flow and cannot be moved using the top, right, bottom, or left properties. An example of its use is as follows.
<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
position: static;
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="static-box">Box 1 - Static</div>
<div class="static-box">Box 2 - Static</div>
<div class="static-box">Box 3 - Static</div>
</body>
</html>
In the code example above, the three boxes with the class .static-box will be displayed sequentially from top to bottom according to the order in the HTML.
When to Use Position Static?
We can use position: static; when there is no need to set a specific position, allowing the element to follow the normal flow of the document.
Relative Position
Relative Position follows the normal flow of the document, but can be shifted from its original position using the top, right, bottom, or left properties. Here's an example of how it's used.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid gray;
padding: 20px;
}
.relative-box {
position: relative;
width: 150px;
height: 80px;
background-color: lightgreen;
border: 2px solid green;
margin: 10px;
}
.moved-box {
position: relative;
top: 20px;
left: 30px;
background-color: orange;
border: 2px solid darkorange;
}
</style>
</head>
<body>
<div class="container">
<div class="relative-box">Box Normal</div>
<div class="relative-box moved-box">Box Moved</div>
<div class="relative-box">Box Normal Lagi</div>
</div>
</body>
</html>
Boxes with the class moved-box or the second box will remain in their original positions, but the boxes will shift 20px down and 30px to the right.
When to Use Relative Positioning?
If you only want to shift an element slightly without changing the overall layout structure, you can use positioning: relative;.
Absolute Positioning
Absolute Positioning makes an element appear as if it is outside the document or, more precisely, floating above the document. Here is an example of its use.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background-color: lightgray;
border: 2px solid gray;
margin: 20px;
}
.absolute-box {
position: absolute;
width: 100px;
height: 80px;
background-color: red;
border: 2px solid darkred;
color: white;
text-align: center;
line-height: 80px;
}
.top-left {
top: 10px;
left: 10px;
}
.top-right {
top: 10px;
right: 10px;
}
.bottom-center {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.normal-text {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="normal-text">
this is normal text inside container with relative position.
</div>
<div class="absolute-box top-left">Top Left</div>
<div class="absolute-box top-right">Top Right</div>
<div class="absolute-box bottom-center">Bottom Center</div>
<div class="normal-text">
this is normal text too
</div>
</div>
</body>
</html>
In the code example above, elements with position: absolute; will not affect the position of normal text.
Tips for Defining Absolute Position
Please note that when we define an element with position: absolute;, we need to define the parent element as position: relative;. Otherwise, the element with position: absolute; will be positioned relative to the document body.
When to Use Absolute Positioning?
It is very useful when we want to create a component such as a tooltip, dropdown menu, popup, and so on.
Position Fixed
Position Fixed will lock the element in a specific position on the screen (viewport) of the browser. Elements defined as fixed will not move when the page is scrolled. Here is an example of its usage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
height: 2000px; /* making the page scrollable */
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 20px;
background-color: navy;
color: white;
text-align: center;
z-index: 1000;
}
.content {
margin-top: 80px;
padding: 20px;
line-height: 1.6;
}
.scroll-content {
height: 500px;
background-color: lightcyan;
margin: 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<nav class="navbar">
Fixed Navbar Example
</nav>
<div class="content">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla nisl, cursus vitae odio sed, iaculis convallis arcu. Duis ut rhoncus urna. Ut hendrerit nibh quis mi commodo blandit in ut dolor. Curabitur id magna vitae quam vulputate ultrices eget at magna. Vivamus suscipit lacus convallis ex mollis auctor. Etiam erat enim, convallis ac est a, ornare venenatis nunc. Ut faucibus justo eu neque egestas, id ullamcorper velit laoreet. Nunc scelerisque, magna a suscipit maximus, odio nisl tempor elit, id elementum nunc leo sed nibh. Aenean sagittis facilisis luctus. Sed sit amet orci ante. Morbi sit amet augue luctus, fringilla sapien sit amet, convallis purus. Fusce malesuada rutrum tellus.
Integer vel sapien nulla. Aenean iaculis tempus ligula in bibendum. Vestibulum vel accumsan quam, sit amet tincidunt lacus. Aliquam erat volutpat. Vivamus scelerisque lacus tellus, eget dignissim mauris eleifend nec. Quisque urna mauris, consequat sit amet dapibus gravida, lacinia id quam. Sed convallis eros sed lorem hendrerit rutrum. Integer cursus augue eu orci convallis laoreet. Aenean auctor, diam eu suscipit feugiat, nunc tellus efficitur dolor, id ornare purus orci ac nibh. Aliquam erat volutpat.
Mauris blandit luctus rutrum. Vestibulum ut nunc massa. Nam id vestibulum dui. Suspendisse posuere semper tellus lacinia iaculis. Sed placerat enim a efficitur tincidunt. Vivamus velit turpis, auctor eget dapibus ac, feugiat a elit. Duis id mauris nisl. Nulla vestibulum elementum eros in convallis.
Sed laoreet, sapien in scelerisque feugiat, neque lectus scelerisque est, non ultricies nisl tellus nec lacus. Aliquam convallis mattis semper. Donec eu tortor justo. Quisque a convallis massa, in tempus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus risus eros, molestie vel congue eget, consequat in elit. Nulla pellentesque vel dui a ornare.</p>
</div>
</body>
</html>
In the code example above, if you scroll down, the navbar will remain at the top of the browser screen.
When to Use Position Fixed?
It is ideal when creating elements such as navbars, banners, or elements that need to remain visible in the browser when scrolling.
Conclusion
By understanding CSS Positioning and knowing the differences between static, relative, absolute, and fixed, we can create more dynamic, interactive, and flexible web designs.
Thank you, see you in the next article.
