Cem Eygi
Cem Eygi
Sep 18, 2018 · 4 min read

Positioning elements with CSS can be tricky in web development. Things can quickly get complicated as we add more elements to the webpage. Therefore, it is essential to know how to use CSS for aligning elements. It will also save us time while coding.

There are many different ways/methods for positioning elements. You can use pure CSS properties like float, position, display, or new layout modules like CSS Flexbox, Grid, or a framework like Bootstrap.

I will be covering each of them one by one in the future, but for this piece, we are going to focus on CSS position property.


CSS Position & Helper Properties

There are five main values of CSS Positions:

position: static | relative | absolute | fixed | sticky

and properties for setting the coordinates of an element (I call them “helper properties”):

top | right | bottom | left AND z-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 two dimensions, z is the third. As an element’s z-index value increases, it moves in front of other elements. Z-index also doesn’t work with position: static or without a declared position.

Elements are ordered from back to front, as their z-index increase

Now let’s explain the CSS position values in detail.


Static

position: static is the default value. Whether we declare it or not, elements are positioned in normal order on the webpage. Let’s give an example:

First, we define our HTML structure:

Then, we create two boxes and define their positions:

same result with & without position: static

Div’s are block elements by default, and that’s why they are not on the same line.


Relative

With position: relative, an element’s new position is relative to its normal position.

Starting with position: relative and 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.

Let’s move the orange box from before next to the blue one:

Orange box is moved 100px to bottom & right, relative to its normal position

NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.


3. Absolute

Unlike position: relative, where the element is positioned relative to itself, 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 parent element:

And change its position value to absolute:

position: absolute takes the element to the beginning of its parent

It looks like the blue box has disappeared, but it hasn’t. The blue box behaves like the orange box is removed, so it shifts up to the orange box’s place.

Let’s move the orange box by five pixels:

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>.

.container {
position: relative;
background: lightgray;
}

4. Fixed

Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:

  • They are only relative to the <html> document, not any other parents.
  • They are not affected by scrolling.

Here in the example, I change the orange box’s position to fixed, and this time it is relative five pixels to the right of the <html>, not its parent (container).

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.


5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until it reaches a declared point, like position: relative, and afterwards changes its behavior to position: fixed. The best way to explain position: sticky is through an example:

IMPORTANT: Position Sticky is not supported by Internet Explorer or earlier versions of Edge.


That’s about it for the CSS Position Property. It may seem complicated at the beginning, so the best way to understand it is by practicing. Keep coding and experimenting until you have a better understanding. If something is not clear, leave a question in the comments and I’ll do my best to answer it.

If you want to learn more about Web Development, visit our Blog Website: www.codingdocs.com

Better Programming

Advice for programmers.

Cem Eygi

Written by

Cem Eygi

Front-end Developer — Visit Our Blog Website: www.codingdocs.com

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade