CSS position: Due to the difference between absolute and relative, the design collapses drastically!

Other language site
ja ja
Google Translate
  • -

  • ---

  • -

  • -

  • -

CSS Logo

A "position" property that changes the position of HTML elements in CSS. However,
if you know only "absolute" and "relative" to designate the absolute position and to specify the relative position, the displayed content of the page may be greatly destroyed.

I will explain the behavior of the position property to prevent it.

What is the position property?

The position property is used to change the position of HTML elements.

Using the position property, the values of the top, bottom, left, and right properties that actually change the position of the element are valid.
If you do not set the position property, these properties will be invalid even if they are set.

Possible values for the position property are as follows.


It is the initial value.

"top", "bottom", "left", "right" will not be valid even if you set a value, it remains disabled. It will not be used. That's because it has the same meaning as when not using the position property.


Used to specify the relative position to the "top", "bottom", "left", "right" properties. The position (static) of HTML elements before moving is the standard.


Used to specify the absolute position for the "top", "bottom", "left", "right" properties.
The basis position changes depending on the value of the position property of the parent element.

If the position property of the parent element is a value other than static, it is the position where the parent element is the basis.
If you do not set the position property on the parent element (static), the entire window is the basis position.


The basis position is the same as absolute.

The difference with absolute is where the position is fixed even when scrolling.
It is used with buttons to move to the top of the page. It is often seen on the bottom right of the web page.

Be careful when using absolute the whole web page collapses greatly!

The difference between relative and absolute is not the only difference between specifying relative position and absolute position.
There is a decisive difference on the display of the web page.

To see the difference, let's first look at the absolute sample.

Sample absolute

You can see that the basis position has changed depending on the value of the position property of the parent element.
The point to pay attention to here is that in the case of absolute the area of the original position has disappeared.

In absolute, the element moves completely and becomes floating from other elements.
Since the original area has disappeared, the element (parent end) written under the moved element will be shifted by the original element.

Also, you may be interested in specifying relative to ".parent2".

In fact, even if this value is absolute, the result will be the same. This value is merely setting the method of specifying the position of the parent element, so it does not matter to the child element.

However, when the parent element moves, the child element also moves in conjunction with it.

Let's see the relative sample.

Sample relative

The point to notice here is that in the case of relative, the area of the original position is maintained.

Since the basis position of relative is the original position, the original area can not be erased.
It is because if you erase it the basis position will be lost.

Since the area of the source remains in relative, it does not affect other elements.


There is a difference between absolute and relative whether or not the original region remains.
If you do not know this, HTML elements may move to an unintended location and destroy the entire web page.

Let's know that there is such movement in the position property.

SNS also distributes articles.
Leave a Reply


If you like this article, share it!