Identifying the Basics of Positioning in CSS
It has been said that the way elements are positioned on a web page is incredibly important. Well, this work is done through the position property in CSS. This property allows us to control how the elements are positioned on the page according to our preferences.
There are four main positioning types in CSS, which include static, relative, absolute, and fixed. In this article, we will examine these properties together.
How Positions Can Be Used
When you define an element with static, that element will be positioned according to the natural flow of the page and does not have a specific positioning. Now, if you use relative, the element can be positioned relative to its current position.
This means that the original position of the element is still preserved on the page, but you can adjust its position using the top, right, bottom, and left properties.
Using Absolute and Fixed Positions
The absolute property takes the element further away and allows it to be positioned relative to the first positioned ancestor element completely, generally beyond the normal flow of the page.
On the other hand, the fixed property positions an element in a constant position on the page, meaning that even as you scroll up and down the page, the element remains in its place.
Best Practices and Techniques
Using positioning in CSS can be very helpful for designers of complex and beautiful pages. For instance, you can use position: fixed; to create a persistent header that always stays at the top of the page. Or use position: absolute; to position an image in corners of the page that is independent of other positioned elements.
Another technique often used is the combination of position: relative; and position: absolute; for better control over positioning inside a specific containing element on the page.
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
.relative-box {
position: relative;
width: 300px;
height: 200px;
background-color: lightblue;
}
.absolute-element {
position: absolute;
top: 20px;
right: 20px;
background-color: coral;
padding: 10px;
}
.fixed-header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed-header">
Fixed Header
</div>
<div class="relative-box">
This is a relative box.
<div class="absolute-element">Absolutely Positioned</div>
</div>
</body>
</html>
Description of the Code
<!DOCTYPE html>
This declaration defines the document type for HTML.
<style>
In this section, we define the CSS styles that we want to apply to the page.
.relative-box
This class creates a box with relative positioning and sets a light blue background color.
.absolute-element
This element is placed absolutely inside the relative-box and can be positioned with the top and right properties.
.fixed-header
This style creates a fixed header at the top of the page that remains in place while scrolling.
Other explanations may refer to these styles applied to HTML elements.