4. CSS Properties – Part 2
CSS Positions
Positioning elements in web development isn’t as easy as it seems. Things can get complicated as more elements are added to the page. Therefore, it is essential to know how to use CSS for aligning elements.
There are different ways/methods for positioning elements. Using Bootstrap is a good way, for example, but not all projects use Bootstrap. In this article, we will explain one of the ways of aligning elements with pure CSS: the position property.
We can also use CSS display property to align elements with values such as flex, grid, inline-block, etc. Check out this article for more details on the display property.
CSS Position & Helper Properties
There are 5 main values of CSS Positions:
position: staticposition: relativeposition: absoluteposition: fixedposition: sticky
and properties for setting the coordinates of an element (“helper properties”):
toprightbottomleftz-index
Note: Helper properties don’t work without a declared position, or with position: static.
What is this z-index?
We have height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element comes in front of other elements as its z-index value increases. Z-index also DOES NOT work with position: static or without a declared position. Here is an illustration:
As you can see, elements are ordered from the back to the front, as their z-index increases.
Now let’s take a look at the CSS: position values in more detail:
- position: static
position: static is the default value. Whether we declare it or not, elements are positioned in normal order on the webpage. Let’s take a look at an example in this repl.it:
Since divs are block elements by default, that’s why they are not on the same line. As you can see, this is the same result with and without position: static.
- position: relative
position: relative means an element’s new position is relative to its normal position. For all non-static position values, we are able to change an element’s default position. But only defining position: relative is not enough, we also need to set the element’s coordinates with helper properties.
As an example, let’s say we want to move the orange box next to the blue box. Take a look at this repl.it:
As you can see, the orange box is moved 100px from the top and to the right, relative to its normal position which would have been right above the blue box.
NOTE: Using position: relative for an element, does not affect other elements’ positions.
- position: absolute
In position: relative, the element is positioned relative to itself. However, an absolute positioned element is relative to its parent.
An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.
Since position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage.
Let’s add a container as the parent element in this repl.it:
Looking at the result, it may look like the blue box has disappeared. In reality, however, it hasn’t. Since the orange box’s position: absolute takes it to the beginning of the parent element, in this case <div class="container">, the blue box behaves as though the orange box has been removed entirely. As a result, the blue box shifts up to the orange box’s place and is actually sitting behind the orange box.
Let’s move the orange box 20px from the top and to the right to demonstrate what we mean in this scenario. Take a look at this repl.it:
Now we can see the blue box sitting behind the orange box. The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial <html>.
For example, let’s add a background color to the parent element <div class="container"> in this example repl.it:
- position: fixed
Similar to position: absolute elements, position: fixed elements are also removed from the normal document flow. The differences with position: fixed elements are:
- They are only relative to the
<html>document, not any other parent elements. - They are not affected by scrolling.
Here in this example repl.it, we change the orange box’s position to fixed and this time it is 5px relative to the right of the <html>, and not its parent, <div class="container">.
As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent, <div class="container">, anymore.
- position: sticky
position: sticky can be explained as a mix of position: relative and position: fixed.
It behaves up to a declared point such as position: relative, then it changes its behavior to position: fixed. The best way to explain position: sticky can be seen in this example.
Box Model in CSS
In this video, we will use examples to explain and show how the box model works on CSS elements, and by the end of this video you will have a complete understanding of the CSS box model.
Source: Web Dev Simplified
CSS Units
In this video, we will be covering all of the important CSS units that you need to know.
Source: Web Dev Simplified