Align top right CSS

Positioning elements with CSS in web development isnt as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals with aligning HTML elements, you won't be able to fix your alignment issues.

There are different ways/methods for positioning elements with pure CSS. Using CSS float, display and position properties are the most common methods.

In this article, I will be explaining one of the most confusing ways for aligning elements with pure CSS: the position property. I also have another tutorial for CSS Display Property here.

If you prefer, you can watch the video version of CSS Positioning Tutorial:

Let's begin...

CSS Position & Helper Properties

So there are 5 main values of the Position Property:

position: static | relative | absolute | fixed | sticky

and additional properties for setting the coordinates of an element [I call them helper properties]:

top | right | bottom | left AND the z-index

Important Note: Helper properties dont 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 in the webpage comes in front of other elements as its z-index value increases.

Z-index doesnt work with position: static or without a declared position.

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

You can watch the video on my channel to see how to use the z-index in more details:

Now lets move on with the position property values...

1. Static

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

First, we define our HTML structure:

Then, we create 2 boxes and define their widths, heights & positions:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }same result with & without position: static

As we can see in the picture, defining position: static or not doesn't make any difference. The boxes are positioned according to the normal document flow.

2. Relative

position: relative: An elements new position relative to its normal position.

Starting with position: relative and for all non-static position values, we are able to change an elements default position by using the helper properties that I've mentioned above.

Lets move the orange box next to the blue one.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }Orange box is moved 100px to bottom & right, relative to its normalposition

NOTE: Using position: relative for an element, doesnt affect other elements positions.

3. Absolute

In position: relative, the element is positioned relative to itself. However, an absolutely 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 doesnt have any parent elements, then the initial document 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.

Lets add a container as parent element:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }position: absolute takes the element to the beginning of itsparent

Now it looks like the blue box has disappeared, but it hasnt. The blue box behaves like the orange box is removed, so it shifts up to the orange boxs place.

Lets move the orange box 5 pixels:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }Now we can see the bluebox

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 .

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

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 document, not any other parents.
• They are not affected by scrolling.

.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Here in the example, I change the orange boxs position to fixed, and this time it is relative 5px to the right of the , not its parent [container]:

As we can see, scrolling the page doesnt 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 a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

Browser Support for Position:sticky

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!