The "position" property is always used in CSS to change the position of web content.
However, if you think that "absolute" and "relative" are just for positioning, it can cause a major disruption to the content of a page.
In order to prevent this, I'd like to introduce the original behavior of the "position" property.
This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.
What is the position property?
The "position" property specifies the type of HTML element to change its position. The "position" property enables the following property values
top
bottom
left
right
The four properties that specify the position of an element are not valid unless you set the "position" property.
The "position" property only specifies the type, not the position.
Let's look at the "position" property values one by one.
static
Default values.
"top", "bottom", "left" and "right" property values are invalid.
(It doesn't make sense to specify them.)
It is rarely used, because it is the same as if the "position" property had not been specified.
It is used to return the content to the default position.
relative
Specifies a relative position, based on the original position of the HTML element.
"static" is the base position.
"top", "bottom", "left" and "right" property values are distances from the original position.
absolute
| conditions | standard |
|---|---|
| The "position" property of the parent element is not "static" | parent element |
| Does not set the "position" property of the parent element (static) | Entire page |
The reference position of either the parent element or the entire page is the top left of that component.
fixed
The criteria for fixed is the same as for absolute, except that it remains fixed when scrolling.
Component tracking
Commonly found at the bottom of a web page, it is used for buttons that take you to the top of the page.
sticky
A new value added since CSS3, used for component tracking, just like fixed.
The base position is the parent element. The difference from fixed is that the position is fixed only within the parent element.
If the parent element disappears from the screen when scrolling, the sticky component won't follow it.
That's all I can explain at the moment. There are some things that I can't figure out from the various explanations I've seen.
I've been working on it, but there are still some things I'm not sure about. I will update the content when the verification is finished.
Be careful when using absolute, because the whole web page is going to collapse a lot!
The difference between 'relative' and 'absolute' is not just a matter of specifying a relative or absolute position.
There is a definite difference when displayed on a web page. Let's take a look at the 'absolute' sample code first.
Sample of absolute
See the Pen sample - CSS position absolute - by tadtadya (@tadtadya) on CodePen.
The value of the parent element's 'position' property changes the position of the base, and the content is moved around a lot when the parent element is 'static'. The reference is the top left corner of the entire page.
To move it to the parent element as the reference, use something other than 'static', like 'relative' in '.parent2'.
If you set '.parent2' to 'absolute' the result is the same.
People tend to think that since this is a parent element, it has nothing to do with the children, but if you specify a parent element that is not 'static', it will affect the children as well.
When a parent element is moved here, its children are also moved in tandem with it.
The area before it was moved disappears.
It is important to note that when it is 'absolute', the area at the previous position disappears.
When it is 'absolute', the element moves completely out of the way and rises above the other elements. Since the area before the move is gone, the "parent end" is shifted upwards by the amount of the move.
Let's look at some sample code for 'relative'.
- 'absolute' eliminates the area before it was moved.
- The position of the content around it is shifted by that amount.
Sample of relative
See the Pen sample - CSS position relative - by tadtadya (@tadtadya) on CodePen.
It is important to note that when it is 'relative', the area at the previous position remains intact.
Since the base position of 'relative' is the position before the move, the area before the move cannot be erased. This is because if it is erased, the reference position cannot be known.
It does not affect any other elements because it leaves the area before it was moved.
- 'relative' means that the area remains before it was moved.
- The position of the surrounding content is unaffected.
Finally
The difference between 'absolute' and 'relative' is that the region before the move remains or not.
If you don't know this, your content can move in unexpected places and collapse your entire web page.
You should know that the 'position' property has this movement.
- 'absolute': the area before the move disappears
- 'relative' : the area before the move remains
