CSS3 – Carlitabobita

The CSS ‘position’ property is a fundamental aspect of page design in CSS.

Read on to get a breakdown of how this important component works!

static

If the position property is not set, it is automatically ‘static’. Setting the left, right, bottom, top and z-values in static mode will have no effect. It will just exist within the normal page flow.

Notice how the blue block has a ‘top’ value of 30px, but the blue block has the same vertical position as the other blocks.

relative

Now things start to get fun! If left, right, top, bottom or z-values are set for an element in relative mode, the adjustments will be applied relative to the elements default position.

absolute

When an element’s position attribute is set to absolute, its position is determined relative to the container it is within (that or its closest position ancestor). It is taken out of the normal flow of elements in the document.

fixed

Elements with the fixed position are positioned relative to the viewport. They are taken out of the normal flow of the elements in the document.

sticky

Sticky positioning means that an element will behave as though it is relative, until it crosses a positional threshold, and then it is treated as fixed. It is also taken out of the normal flow of the document.

References:

httpss://developer.mozilla.org/en-US/docs/Web/CSS/position

These are two CSS selectors which tend to confuse people quite a bit. A key difference is which elements are counted and how.

I found that it helps a lot to separate the children into two lists.

Let me explain!

Lets use this block of code to elaborate how these two selectors work:

:nth-of-type()

First, let’s start off looking at :nth-of-type(). It takes one argument, which is either a number or a formula to indicate the positions we are interested in.

Is it what you expected?

This is how I like to think of this selector in plain english. Split the children into two lists.

Make a list of the p elements
Of that list, we select the even numbered p elements

Note that, in this case this does NOT mean we select the 2nd, 4th, 6th etc. children of the div. We select the2nd, 4th, 6th etc. p elements relative to the other p elements. If we wanted to select the 2nd, 4th, 6th etc elements (i.e. the even elements) we would not specify an element type

:nth-child()

This selector is more straightforward.

To translate this selector into plain english as well (again using the above example):

Make a list of the even elements
Of that list, select the div elements

And that’s it! It’s really not as complicated as it looks, as long as you are clearly separating the children into two lists in your head:

One list of all the elements of the selected type within the container
One list of the specified numerical placement of these elements

And ensure that you are starting with the right list!

Note: both of these selectors are CSS pseudo-classes which will match certain elements when they are in a specific state (in this case, the state refers to the numerical position the element occupies.)