In this series we will discuss some of the basic concepts and topics considered somewhat challenging in CSS, in details. Some of the topics we will cover include:
- Advanced Positioning (Layout — moving things around)
- Pseudo Elements and classes (Magic tricks)
- CSS Selectors (targeting specific things on your webpage)
- Animations (Making things come alive and looking really cool)
- Box Model (understanding margin, padding and the contents of an element)
CSS doesn’t have to be hard (although it may be sometimes tricky) provided you have a solid understanding of the basics. Like any other thing in life, once you fully grasp the rudiments, building from thereon is like lego pieces — everything fits perfectly into each other.
As a developer, be you full-stack or frontend or backend, solid understanding of these basics will save you some headache in your dev journey.
I will walk you through some of the struggles I faced and how I am able to overcome them, get better over the years.
When it comes to using CSS to do incredible styling and developing complicated designs, everything all comes down to understanding certain critical concepts. Either you know them, learn them and use them OR you complain all day long about how miserable your life has become with CSS.
I will do my best to simplify these concepts as much as possible in order to make things easy to grasp, particularly for beginners.
Without further talks, let’s get into it.
Advanced Positioning
In CSS, we have these five positions:
- Static position
- Fixed position
- Sticky position
- Relative position
- Absolute position
In order to move things around or take total control of your layout, you have to understand positioning quite well. There is just no shortcut to it.
Static Position.
p {
position: static;
}The default document flow on a webpage is the static position. In other words, elements are not positioned in relation to other elements on the page. Instead, they follow the order in which they are written in our HTML i.e from left to right and top to bottom. And thus every element is aware of the next one without overlapping each other.
Note: every element is given this position by default whether or not it is explicitly specified in our CSS.
position: static
While this is reasonable, it sets some sort of limitation to creativity. Imagine we want to make certain texts on our website appear in a specific corner or say, make it fixed in one position regardless of how far someone scrolls, you can see how limiting this can be. We will end up with sites that are so rigid, drab and uninteresting. Thankfully, CSS gives us the tools to rewrite the destiny of our webpage, putting us back in total control. All we need to do is specify the position we want, and voila! we change the game.
In most cases when we give element a certain position, we must specify exactly where we want them on the screen. Do we want it exactly in the top or left or right or bottom, and how many pixels away?
Note: bear in mind that once an element is given a position other than static which is the default position e.g fixed, absolute or relative or sticky, that element is no longer part of the normal document flow. It behaves as if it is alone in its own world not minding other elements around it. In other words, it can overlap or completely cover any element around it.
Also, whenever an element is given a position, they are positioned relative to something. Whether relative to its original position, its parent or grandparent etc or the HTML itself.
Fixed Position
<div>
<header>Menu</header>
<main>
<section>
<h1>Welcome home!</h1>
</section>
<article>
<p>A simple article</p>
</article>
</main>
</div>body {
height: 1500px;
}
header {
position: fixed;
top: 0;
left: 20px;
right: 20px;
color: #fff;
width: 300px;
height: 50px;
margin: 0 auto;
background-color: blue;
text-align: center;
}When we give an element the above properties, what we are saying in essence is we want this element to be fixed to that position however far or wide we scroll. And it is positioned in relation to the HTML document.
Note: any element given a
position: fixedis always in relation to the html. i.e the entire viewport.
The top, left and right properties designate the starting point. In other words, start from position 0 from the top, 20px from left and and 20px from the right.
As you can see we have several elements on the webpage, you will discover only the element with position: fixed stays fixed in the same position regardless of how much we scroll. The other elements e.g h1 and p disappeared as we scrolled.
A popular use case of fixed position is the menu bar often at the top of most websites you visit. It makes reaching the menu super convenient.
Absolute Position.
An element given a position of absolute can be relative to its nearest parent, grandparent etc or relative to the html. How? If its parent is given position: relative, the child element is positioned relative to its parent. In a situation where none of its parent or grandparent etc are given a position, the child element positions itself relative to the html document.
Code example:
<div class="parent"> parent
<div class="first-child">first-child</div>
<div class="second-child">second-child</div>
<div class="third-child">third-child</div>
</div>div.parent {
position: relative;
width: 500px;
height: 500px;
background-color: #eaeaef;
}
div.parent > * {
width: 100px;
height: 100px;
}
div.first-child {
position: absolute;
top: 50px;
left: 20px;
background-color: skyblue;
}
div.second-child {
background-color: green;
}
div.third-child {
background-color: red;
}Recall we said positioned element(s) must be in relation to something? In the code above, the first divchild element (first-child) is positioned relative to the parent div, hence the reason we gave the parent a position: relative. That is from the top we want the first child div to be 50px away from the position of its parent (consider it as margin or space), 20px away from the left of its parent div. If the parent element is not given a position, the child element is positioned relative to the html document itself. In other words, it starts 50px (50px margin or space) from the top and 20px from the left of the webpage.
A common use case would be if you were trying to create an overlay e.g texts on pictures, menu hidden under another menu etc.
Note: You would discover the first child
divis now overlapping the two other children divs. This is because an absolutely positioned element is no longer part of the document flow. It doesn’t regard any element around it.
Relative position.
Actually, in my opinion, this is the simplest of advanced positioning to understand. Any element given a position: relative means that element is given a position that is relative to its original or normal or initial position. e.g
For example:
<div>
<p>position</p>
</div>div {
width: 500px;
height: 500px;
background-color: #eaeaef;
}
p {
position: relative;
left: 20px;
top: 10px;
width: 100px;
height: 100px;
background-color: red;
}In the above code, The p tag or element is given a position: relative; I.e from your original position, we want you to pull away from the left just by 20px (20px space from the left) and 10px from the top. This can be applied to the bottom, right, left, top properties.
Sticky Position.
A sticky element alternates between relative and fixed position. Sticky element is positioned relative until a specified offset is reached whereupon it becomes fixed. Position sticky is often used in a situation where you want a particular element to stick after a certain point or coordinate on the screen.
<section>
<h1>sticky position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas optio distinctio doloremque similique suscipit aliquam, ad cum assumenda magnam voluptatibus earum, perspiciatis at placeat iste explicabo nisi harum, fuga illum? </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed suscipit similique tempora nulla quam nobis rem animi at, ab, quo molestiae! Dicta, rerum quisquam? Officia, distinctio animi doloremque quos rem quas nulla commodi molestias alias consequuntur dolore ullam enim illum?
</p>
<p class="sticky-paragraph">I am sticky</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta veritatis quae consequuntur praesentium nihil expedita maxime totam rem error dolore?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi et expedita perspiciatis, molestias numquam aspernatur est iste tenetur reiciendis in illum cupiditate itaque laudantium sint a facilis adipisci excepturi beatae architecto unde eligendi. Sint aspernatur quisquam, harum dicta accusamus earum ullam deleniti nemo facere ipsa quas et! Non, neque dignissimos!</p>
</section>body {
height: 1500px;
}
.sticky-paragraph {
position: sticky;
top: 0;
background-color: green;
color: #fff;
padding: 10px;
}In the above code, the sticky paragraph was initially relative until it reached top: 0 whereupon it becomes fixed on the viewport. If it had been top: 20px it would become sticky 20px from the top. Same with any other value you intend to use. You can play around with this offset (top: 0) to understand how this works better.
Thanks for reading. Remember to share if you found the article helpful. I will be publishing part two shortly.
