Use the position property in CSS to align elements

Tram Ho

If you’re new to CSS, aligning elements with the position property might not be as easy as you might imagine. Things get more complicated as the project gets older, and without understanding how CSS solves the alignment of HTML elements, you won’t be able to fix your alignment issues.

There are different ways / methods for locating (locating) elements using pure CSS. Using the float , display and position properties in CSS are the most common methods. In this article, I’ll explain one of the most confusing ways to align elements with pure CSS: the position property.

You can also see instructions for aligning position in CSS with video here .

Now let’s get started!

The position and helper properties

We have 5 main values ​​for the position property:

position: static | relative | absolute | fixed | sticky

and additional properties to set the coordinates of an element (I call them “helper properties”):

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

Important note: the helper property doesn’t work if no position is declared or with position: static .

What is z-index ?

Imagine that we have the attributes for height x and width as y . So z is the 3rd dimension. An element in the web page comes before other elements when its z-index value increases.

z-index does not work with position: static or position is declared.

Elements are sorted from back to front, as their z-index increments:

You can watch the video here to learn how to use the z-index in more detail.

Now continue with the position !

1. Static

position: static is the default value. Whether we declare it or not, the elements will still be positioned in the normal order on the page. For example:

First, we define an HTML structure:

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

The result is the same with and without the position: static declaration:

2. Relative

position: relative : The new position of an element compared to its normal position.

Starting from position: relative (and for all non-static position values) onwards, we can change the element’s default position using the helper properties we mentioned earlier. on.

Try moving the orange box to the side of the blue box:

The orange box is moved 100px to the bottom and to the right, from its normal position:

Note: Using position: relative to one element does not affect the position of other elements.

3. Absolute

In position: relative , the element is positioned relative to itself. However, an element with position: absolute is relative to its parent.

The position: absolute element is removed from its normal position on the web page. It is automatically positioned to the starting point (upper left corner) of the parent element. If it doesn’t have any parent elements then the original root tag <html> will be its parent.

From the position of the element with the position: absolute , other elements can be affected and act as the position: absolute element completely removed from the web page.

For example, add a container as the main element:

position: absolute brings the orange element to the beginning of its parent:

Now it looks like the blue box is gone, but it’s not. The blue box acts like the removed orange box, so it will shift to the position of the orange box.

Now try moving the orange box by 5 pixels, we can see where the green box is!

The coordinates of an element with position: absolute are relative to its parent if the parent element is also non-static.

4. Fixed

Like position: absolute , elements with position: fixed also removed from their normal position on the page. The difference is:

  • They are only relative relative to the <html> tag, not any other parent elements.
  • They are not affected by scrolling.

Example: Change the position of the orange box to position: fixed and this time it is 5px relative to the right margin of the <html> tag, not to its parent (container) element:

See specific scroll page here . As we can see, scrolling does not affect the fixed position of the orange box. It is no longer related to its parent (container) element.

5. Sticky

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

Initially, it acts as an element with position: relative , until the helper property is declared, it is changed to position: fixed . The best way to explain position: sticky is with an example :

Initially, when there is no scrolling or scrolling operation, but the element with position: sticky not at top: 0 , it works as position: relative :

When scrolling and the element with position: sticky starts up to top: 0 , it works like position: fixed :

Important Note: position: sticky not supported in Internet Explorer and some older versions of other browsers. You can check your browser’s support at caniuse.com .

The best way to understand the position property in CSS is by practice. Continue coding until you understand better. If you have any questions about the article, feel free to leave your comments in the comments!

Reference: Source article

Thank for reading !!

Share the news now

Source : Viblo