Dive deep into CSS position with real examples.
There are five values that you can pass into the CSS
Let's take a look at all of them.
Before we do, it's important to understand document flow.
Elements are displayed on the screen as they written in the HTML document.
Consider the following piece of code:
<h1>This is an H1</h1>
<p>This is a paragraph</p>
<h5>This is an H5</h5>
<div> are displayed on the screen in exact order as they written in the HTML file.
Now we can move on to looking at each of the five options for the
position property. We'll begin with
HTML elements are positioned static by default. An element with the
position: static; is not positioned in any special way. It is always positioned according to the normal flow of the page, as shown in the screenshot above.
Relative positioning keeps an element within the typical flow of the document. It makes the element's position relative to its original position on the page, which can be adjusted using offset.
Relatively positioned elements are essentially the same as statically positioned elements. The difference is that relative positioning creates a new stacking context, which allows you to set the
z-index in a meaningful way.
Consider that we have four boxes:
<div class="box blue"></div>
<div class="box pink"></div>
<div class="box lime"></div>
<div class="box orange"></div>
And they each have the following rule:
margin: 0 auto;
With some color added in, and within a centered container, that would give you something like this:
Now, let's offset the blue box:
As you can see blue box is shifted
150px from left because I applied left offset after giving it relative positioning.
We can shift the bottom box (orange) to the left by setting its
Notice here that document flow is as it is. So the relative position does not affect the document flow.
When an element is positioned with the
absolute value, it is removed from the normal document flow. After applying absolute position, the element will no longer be in the flow and no space is created for the element within the page's layout.
For example, if I apply absolute positioning to the blue box (after removing the offsets and centering), then the blue box will be out of the flow and hence no space will be allocated to it.
See the image below. The blue box is out of flow, and you now can't see the pink box because it is sitting behind the blue box.
The absolute position of an element is relative to its closest ancestor, which has some position property.
Consider the code below:
<div class="parent blue">
<div class="child pink"></div>
With some styling applied:
That looks like this:
Notice that I applied relative positioning to the parent (blue) and absolute positioning to the child (pink). Absolute position is relative to the closest ancestor's position. Because the child's parent (blue) has position set, the child (pink) is offset according to its parent's position.
Let's understand it in little more detail. Consider this piece of code:
<div class="grandparent blue">
<div class="parent orange">
<div class="child pink"></div>
If we set the grandparent's (blue) position to
absolute, leave the parent's (orange) as default, and set the child's (pink) to
relative, the child's position will be relative to the grandparent, not the parent.
And because I set the
right properties of the child, it is going to appear in the bottom right corner of the grandparent, not the parent.
Elements with Fixed positioning are always relative to the viewport. That means they always stay in the same place even if the page is scrolled.
On the other hand, elements with sticky positions are a mixture of the relative and fixed positions. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (just like fixed positioning).
This can be seen in action in this CodePen example.
Notice that the yellow element stays within the normal flow of the document until it hits the top of the viewport. Then it sticks to the top.
The fixed element (red) is always fixed to its position, and falls outside the document flow.
I think that's pretty much it. Did I forget to add something? Feel free to comment on the original thread. And follow me on Twitter for more posts like this one.
Thanks for reading ❤️
A brief description of CSS, before suggesting a couple free courses.
A handful of tips and tricks on getting started with CSS to make your website visually interesting.
There are countless ways to learn CSS. Here are 100 resources in various categories to get you started.