Table of Contents
Element Positioning CSS
The positioning property of CSS gives us the information about where an element or an entity is placed on a webpage. There are five different types of position property available in CSS and those are:
- Fixed
- Absolute
- Relative
- Sticky
- Static
Let’s deep dive into each of the position property of CSS one by one.
What is “Fixed” positioning in CSS?
The element with position: fixed will remain fixed to the screen even when we scroll the page. We can set the position of the element using top, right, bottom and left.
How to use Fixed positioning CSS?
Let’s write the code for the same.
HTML & CSS for "Fixed" Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning using CSS</title>
<style>
body {
margin: 0;
background-color: aquamarine;
}
.fixed {
height: 100px;
position: fixed;
margin-top: 1px;
background-color: rgb(0, 11, 11);
width: 100%;
font-size: 2em;
color: wheat;
}
</style>
</head>
<body>
<div class="fixed"> HELLO I AM FIXED HERE RELATIVE TO THE VIEWPORT </div>
</body>
</html>
Here the div element with class fixed has position: fixed and the height given here is 100px to give a clear visibility. The output of this code is:
Output
Now this div will be fixed to the top.
Let’s move on to the next property.
What is “Absolute” positioning in CSS?
An element with position: absolute will be positioned with respect to its nearest non-static ancestor. The positioning of such element does not really depend upon on the elements which are at the same level or sibilings.
Proceeding with the same example, we will now add another div which will have position: “absolute” and let’s see what the output will be.
How to use absolute positioning CSS?
HTML & CSS for "Absolute" Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning using CSS</title>
<style>
body {
margin: 0;
background-color: aquamarine;
}
.fixed {
height: 100px;
position: fixed;
margin-top: 1px;
background-color: rgb(0, 11, 11);
width: 100%;
font-size: 2em;
color: wheat;
}
.lorem {
margin-top: 120px;
position: absolute;
height: 1000px;
}
</style>
</head>
<body>
<div class="fixed"> HELLO I AM FIXED HERE RELATIVE TO THE VIEWPORT </div>
<div class="lorem"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur accusamus incidunt, laboriosam officia voluptates iure exercitationem? Deleniti doloremque illo unde assumenda laborum quam nostrum sequi expedita at optio, accusamus vitae. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Consequuntur sunt quam quasi, laboriosam mollitia obcaecati expedita animi praesentium? Delectus sequi pariatur illum voluptatum quas maiores temporibus dolorem aliquid nulla neque! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Nisi tenetur, deleniti quod culpa labore, aut enim esse, fugit cumque incidunt saepe omnis error exercitationem facere veritatis! At amet officiis animi. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nostrum sunt vitae quod! Aliquam, recusandae. Eaque ab, voluptatem harum aperiam eligendi tenetur voluptas, nostrum asperiores dolorem corrupti quaerat fuga perspiciatis dolor.
</div>
</body>
</html>
Output
We see that even after scrolling down the first div doesn’t go up. It’s fixed there.
What is “Relative” positioning in CSS?
An element with position: relative is positioned relatively to other elements or divs that are placed on top of it. After setting it’s top, right, bottom and left properties, other elements will not be able to fill up the spaces left by the elements with relative position. This element is positioned relative to its original position when no property is applied.
Let’s see a div’s position before applying the relative position.
How to use relative positioning CSS?
HTML & CSS for "Relative" Position
<!DOCTYPE html>
<html>
<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
background: rgb(196, 196, 238);
}
.relative {
/* position: relative; */
background: black;
color: #ffffff;
padding: 30px;
/* top: 100px;
left: 100px; */
}
span {
padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>
<body>
<pre>
Learn the most common CSS Positions with Coding Is Easy
to solve css position problems.
<div class="relative">
This div has <span>position: relative;</span>
</div>
Learn the most common CSS Positions with Coding Is Easy
to solve css position problems.
</pre>
</body>
</html>
Output
Now go and uncomment the properties in the relative class inside the style section. And then you will see the output something like this:
Here the div is positioned relative to its own original position.
What is “Sticky” positioning in CSS?
The word itself is self explanatory. The element or the div sticks to the top of the screen whenever it reaches there. If a div is placed at the center of the screen originally and while scrolling up when it reaches the top, it sticks to the top. Let’s get into the coding part.
How to use sticky positioning CSS?
HTML & CSS for "Sticky" Position
<!DOCTYPE html>
<html>
<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
background: rgb(196, 196, 238);
}
.sticky {
position: sticky;
background: black;
color: #ffffff;
height: 100px;
padding: 30px;
top: 0px;
}
.para {
height: 160px;
color: blanchedalmond;
background-color: blueviolet;
}
span {
padding: 5px;
border: 1px #ffffff dotted;
}
.para2 {
height: 1600px;
color: blanchedalmond;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="para"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, deserunt omnis recusandae qui quos libero temporibus alias sunt? Tempore asperiores similique a esse corrupti cumque eligendi in illum labore reiciendis. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Blanditiis eligendi aspernatur veniam! Quam, obcaecati. Sequi adipisci, at a debitis omnis iusto molestiae impedit vero dolore, repellendus odit ipsum necessitatibus temporibus! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Voluptatibus quaerat nam incidunt mollitia quidem asperiores natus autem dolore minima quas! Pariatur illum placeat sequi accusantium sunt quaerat sint consequuntur laborum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Cum aut at obcaecati impedit beatae harum, quo quis. Ut quae animi laboriosam sapiente labore dicta fugiat repudiandae, inventore autem culpa nihil!
</div>
<div class="sticky">
This div has <span>position: sticky;</span>
</div>
<div class="para2"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, deserunt omnis recusandae qui quos libero temporibus alias sunt? Tempore asperiores similique a esse corrupti cumque eligendi in illum labore reiciendis. Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Blanditiis eligendi aspernatur veniam! Quam, obcaecati. Sequi adipisci, at a debitis omnis iusto molestiae impedit vero dolore, repellendus odit ipsum necessitatibus temporibus! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Voluptatibus quaerat nam incidunt mollitia quidem asperiores natus autem dolore minima quas! Pariatur illum placeat sequi accusantium sunt quaerat sint consequuntur laborum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Cum aut at obcaecati impedit beatae harum, quo quis. Ut quae animi laboriosam sapiente labore dicta fugiat repudiandae, inventore autem culpa nihil!
</div>
</body>
</html>
Output
And after scrolling down the screen will look something like this:
Now let’s move towards the last positioning property, i.e Static
What is “Static” positioning in CSS & How to Use?
This property is pretty simple and obvious. Default values of top, right, bottom and left are considered. Elements on the page render in order, as they appear in the document flow.
Hope the tutorial was useful and helpful to you.