Basic CSS Prerequisite: You need to be able to set up a basic HTML page.
What you will learn: CSS Position, Document flow, CSS selectors.
A deep understanding of positioning in CSS is one of the things that can really up your CSS game and is also one of the fundamentals that most developers possibly don't truly understand. Joke of the man who has problems with his living room blinds aside I will be looking at positioning in CSS in this mini-series.
In this first part, we will look at the position property but as you will find out we have other methods available to position elements in CSS, that being the display property and the transform property and the raft of values and assisting properties that each of these properties has.
Understanding Position
To understand position we really need to look at the natural flow of the elements on an HTML page and the best way to see that is to add a few elements to a page. If you don't have a basic page with a linked CSS document, set one up now if you want to follow along.
The Documents Natural Flow
To see how elements naturally position themselves; inside the main element of your page add a div with a class name outer and then inside that add another div with the class name inner.
The thing to note here is we haven't added any position rules. So naturally, we can see the inner element sits on top of the outer element and both their positions are top 0 left 0. This is illustrated by the default code in the above snippet's comments. Note that I have also added margin using logical properties to give the elements a bit of space on top (margin-block-start) and both sides (margin-inline).
By adding a second set of the inner and outer divs we can see that it will naturally go underneath which shows that the flow of the document is down the page.
Image
That's all we need to know for now. Next, we will now look at how we can position the blue box within the black one using the CSS position property.
The CSS Position Property
The CSS position property has 5 possible values but in this article, we will only look at 3. The 3 we will look at are:
static( Default)
relative
absolute
Fixed and sticky are the other values. I will look at fixed and sticky in another article as they have their uses but for now, I want to keep it simple.
We will look at the 3 values above and how we use other assisting CSS properties to actually position our elements.
Again this won't have any effect visually but by adding these properties with the respective values we can now adjust the position.
The top, right, bottom, left, and z-index properties
To adjust position we have the top, right, bottom, left, and z-index properties. The first four take exact values or percentages. The z-index property is used to adjust the stacking order of layers. Since there are a few rules you need to know, we will look at z-index at a later date.
To adjust the position we use the top, right, bottom, left, and z-index properties on an absolutely positioned element. Some things to note about an element positioned absolute are:
They are removed from the normal flow of the document.
They will be contained by (but not within) the parent or closest positioned ancestor or the body if no other element has a position value set.
Position or move the inner element to the bottom right corner
Taking that our element is 300px by 200px and our child element is 150px by 100px and we want to move our inner child element to the bottom right corner we need to move it from the left and top by half, so 150px and 100px respectively. To only move the second set we need to add new class, let's call it inner-2.
Now we have added a new selector we can position that so we can compare, add the following CSS to your CSS.
.inner-2 {
left: 150px;
top: 100px;
}
Or since we can use relative values we can also use 50% on both.
.inner-2 {
left: 50%;
top: 50%;
}
The above code will result in the below example.
Image
Alternatively, since the element is contained by the parent (but removed from the flow) we can position it from the bottom and right as shown in the code below.
.inner-2 {
right: 0;
bottom: 0;
}
It is important to note since we have removed the child element from the flow of the document that in fact, we can move it out of the element, that's why I said contained by, not within. Let's take a look.
.inner-2 {
left: 200px;
top: 125px;
}
Image
So as you can see that an element can be moved outside the parent.
Test changing the absolute to relative. In the case we have just looked at we can also use position: relative on the child and the first rule set would work, that is left and top. However, since the relative value sets the position in relation to itself the bottom and right would have no effect on the position of the child element.
Overflow Hidden If we do push the child element outside the parent as illustrate, we can use overflow: hidden on the parent to hide the parts outside of the parent.
Compare this with the one above and see how the inner element is cut off, nice!
That's about it for this article, I hope that you learnt something new or it has given you a new way to look at how we can use CSS to position things on our screens. I suggest you play around with the code so you can really see how it works. In upcoming articles I will be cover more basic CSS positioning techniques and also more on design and development plus other interesting tech-related stuff, so be sure to sign up to the newsletter, you'll be first to know and also get other offers straight to your inbox.
