Positioning in CSS can be very tricky. I remember when I first started learning CSS, this particular concept of CSS was so daunting that I was confused for a whole week. Thankfully, due to some research and constant practice, I scaled through that hurdle.
In this article, we will learn about the CSS position property and the different position types. We will also be reviewing how we can position elements to create an engaging webpage.
Prerequisites
- Basic understanding of HTML.
- Basic understanding of CSS.
- Code editor.
What is CSS Position Property?
CSS Position Property is a concept in CSS that specifies how an element is positioned in an HTML document. This Property is used with the top, right, bottom, and left CSS properties to determine how an element is displayed in a web page.
The Position Property works with five values. They are:
- Static
- Relative
- Absolute
- Fixed
- Sticky
Let's discuss about them briefly, shall we?
Static
Position: static is the default positioning of all HTML documents in the webpage. Essentially, what position: static does is that, it follows the other element accordingly in the document flow. That is, the first element will be above the second element, the second will be above the third and so on.
Let's use an example to further buttress our point.
Note : We will be using this HTML
codesnippet below for the entire article to demonstrate how these position values work.
<html>
<body>
<section class="parent">
<div class="first-child">
I'm the first child element.
</div>
<div class="second-child">
Second Child(Main Element)
</div>
<div class="third-child">
I'm the third child
</div>
</section>
</body>
</html>
Our basic HTML structure with a parent element and three child elements.
For the CSS.
.parent {
color: black;
border: 1px solid black;
padding: 10px 0;
margin-top: 5rem;
}
.second-child {
background-color: #FF5C35;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
The Output
If you noticed, in our CSS code we haven't apply a position property to any of the elements but check the blue arrow in our output and you can tell that all the elements are static at default. This is possible because the position: static maintains a default document flow of elements.
Now, let's apply a position property and see what happens.
.parent {
color: black;
border: 1px solid black;
padding: 10px 0;
margin-top: 5rem;
}
.second-child {
background-color: #FF5C35;
position: static;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
The Output.
Nothing changed. It didn't change because that is the default behavior for position: static elements.
Relative
Position: relative acts exactly like the position: static but it allows you to do four specific things that position: static doesn't do. That is, you can offset the position of the element relative to itself by using the top, right, bottom, and left properties.
Let's apply position: relative and offset values to our second child element.
.parent {
color: black;
border: 1px solid black;
padding: 10px 0;
margin-top: 5rem;
}
.second-child {
background-color: #FF5C35;
position: relative;
top: 40px;
left: 40px;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
Here, we have applied our position: relative and added an offset value of 40px for both top and left property.
The Output.
From the image above, you can see that the element still maintains that default document flow but the position has be altered because we have offset it by 40 pixels down (with the top property) and 40 pixels to the right (using the left property).
Fun Tip : You can try out the bottom and right properties respectively and see the outcome.
Absolute
Position: relative completely removes the element from the document flow and everything else renders as if the absolute element doesn't exist at all. It's essentially useful when you want to stick an element in a specific position and you don't want any other thing to move around it.
One thing you should know about
position: absoluteelements is that, they are absolutely positioned to a parent element they can make reference to.
Let's try out an example.
.parent {
color: black;
border: 1px solid black;
padding: 10px 0;
margin-top: 5rem;
}
.second-child {
background-color: #FF5C35;
position: absolute;
width: 210px;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
The Output.
Here the element is removed from the document flow and it sits on top of the third child.
Lets apply a position property to our parent element and see how they both work together.
.parent {
padding: 30px 0;
position: relative;
}
.second-child {
position: absolute;
top: 10px;
left: 30px;
}
The Output.
We applied position: relative to our parent element and offset the second child position with a top of 10 pixels and left of 30 pixels. From the image above, you would notice that the second child is absolutely positioned relatively to its parent element.
Note : The parent element can be assigned with a position of either relative, fixed, absolute or relative but not static.
Fixed
Elements that are position: fixed stays in a particular position in your webpage as you scroll, they are not affected by scrolling. They are also removed from the default document flow and are positioned relatively to the viewpoint of the HTML document unlike the position: absolute that are positioned in reference to their parent element.
Check the code below.
.parent {
color: black;
border: 1px solid black;
padding: 30px 0;
margin-top: 5rem;
position: relative;
height: 100vh;
max-width: 500px;
margin: 50px auto 50px auto;
background-color: cornflowerblue;
}
.second-child {
background-color: #FF5C35;
position: fixed;
bottom: 20px;
left: 30px;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
Here we have extended the height of our parent element and position it in the center of the page with a background color to aid a more appealing visual representation.
The Output.
From the screen record above, we can see that the position: fixed element still maintains its initial position regardless of the scrolling and it is positioned outside the parent container but relative to the viewpoint.
The viewport is the area of a web page that's visible to the user.
Sticky
The position: sticky is a combination of both position: relative and position: fixed. Elements that have a sticky position are relatively positioned at default until a certain viewpoint is attained, then they behave like the fixed position.
You will understand it better from our code and output below.
.parent {
color: black;
padding: 80px 0;
margin-top: 5rem;
position: relative;
height: 200vh;
max-width: 500px;
margin: 50px auto 50px auto;
background-color: cornflowerblue;
}
.second-child {
background-color: #FF5C35;
position: sticky;
top: 10px;
}
div {
width: 300px;
height: 70px;
text-align: center;
padding-top: 45px;
background-color: grey;
margin-bottom: 6px;
border-radius: 10px;
}
The Output
From the screen record above, you can see how the second child was positioned relatively at default until we started scrolling and when the element gets to the top of the view point, it was fixed at a particular position ten pixels away from the top viewpoint.
Conclusion
And it's a wrap guys! We have covered quite a lot on the CSS position property. I hope I have been able to dissect this CSS concept in a comprehensive manner for you to build great webpages with this cool feature. Remember, for you to be good and confident at CSS, you need to practice constantly and build projects. Goodluck!
Top comments (0)