Css

We've know how to set size of containers and decorate to make them look nice.
Positioning is the next step to make our webpages look tidy.
Let's talk about Position Properties.

Start Reading ;

Position properties in CSS

There are 4 famous properties which can help us change position of an element and move it around. They are so powerful that people call them the gang of 4:

But, in order to keep our content well ordered by default, web browsers silently make all elements’ positions unchangeable by the rule position: static;. To free the gang of 4 and see their potentials, we need to change value of the position property.

The position property can be used with one of these values:

  • static (set by default) which prevent changing element’s position
  • fixed
  • absolute
  • relative

For each value of the position property, the gang of 4 will behave differently. So, we’re gonna make some sections for the last 3 values of the position property and see the gang of 4 in action.

Using position: fixed;

The rule position: fixed; will tell web browsers that we want to set position of the element relatively to web browser's viewport. This rule has a side effect that makes the element detached from normal flow of the webpage and won’t take space as normal.

Let’s write some CSS code using the fixed value. We’re gonna create a button which is pinned at bottom right corner of web browser’s viewport.

HTML code:

CSS code:

Result:

See the Pen Pinned to Top by Kei Nart (@codenart) on CodePen.

This is how the sample code above work:

  • Firstly, the button is detached from normal flow of the webpage. So, you can notice that images appear right from the start of the webpage. It seems that the button does not exist at all.
  • The rule right: 20px; is used to specify the distance between
    the right edge of the button
    and the right edge of web browser's viewport.
  • The rule bottom: 10px; is used to specify the distance between
    the bottom edge of the button
    and the bottom edge of web browser's viewport.

Using position: absolute;

The rule position: absolute; will tell web browsers that we want to set position of the element relatively to its parent container. Conditionally, the parent container’s position must not be static.

We’re gonna see a simple use of the absolute value by sketching a product card which has a small sale-off tag. :D

HTML code:

CSS code:

Result:

See the Pen YrwOJp by Kei Nart (@codenart) on CodePen.

If position of the parent container is static, web browsers will check the grand container, the grand grand, … to find the closest ancestor container which has non-static position, then set position of the element base on the ancestor.

Using position: relative;

The rule position: relative; will tell web browsers that we want to set position of the element relatively to its default position. Unlike the 2 values fixed and absolute, the value relative will not detach the element from normal flow of the webpage. Hence, it’s commonly used to do some minor fix to the element’s position. It’s just sometimes we want to move an element some pixels to enhance total look of a component.

Let’s take a look at the example below. The second button’s text is enhanced a little bit to look more balance.

Result:

See the Pen Back to Top by Kei Nart (@codenart) on CodePen.

HTML code:

CSS code:

Our tutorial about Position Properties has finished. In the next tutorial, we’ll talk about Styling Text and create a navigation bar. (Just a simple one. :D)

Next: Styling Text ;