Let's keep on viewing the CSF space properties.
In this lesson, we are going to see the property's relative to positioning and in particular we are
dealing with position.
Position is a property which can place an element according to the type of positioning we are going
to insert.
By default, the position that you can insert is static, so static position, and it's a default value
that basically lets the property we are modifying exactly where it is by saving and refreshing.
In fact, you see that our age twos haven't changed their position at all.
Among the attributes which are relative to position, which can be inserted instead of static, absolute
stands out.
Absolute, in fact, enable us to place a specific selector in within a specific.
In an absolute position so that it does not depend on the rest of the content, therefore independently
from paragraphs or other parts of the content.
That take our age to below or above other tags with absolute.
He will overlap a pre-existing content, making the section, not having any type of influence on the.
Therefore, if we save and fresh, we can see that absolute.
Led out to sections above the text, which is now underneath the.
When we insert the position attribute, we have the chance also to insert some left to right, top and
bottom values, which move according to the pixels associated to those properties, the absolute position
of the tag.
Therefore, if I inserted, for example, left in this case, applying a hundred pixel is a value saving
and refreshing.
As you can see, our sections are not at the beginning of the page, but they are placed a hundred pixels
away from the left.
And in this case, if I insert, for example, the top value here as well, I might insert a hundred
pixels.
We will see how the result gets overlooked because in this case, the H2 tag was inserted twice in the
HTML page and so both start at a hundred pixel distance from the top.
Consequently, there would be overlapped.
Therefore, let's delete our left and top.
And I'm stopping here saying that in addition to the value in pixels, it can take also a value in percentage.
Now let's insert another type of positioning and we are seeing the fixed positioning permitting to insert
according to the position of the tag or to other properties inserted within the selector.
To insert the tag in a fixed position, which will remain independent from any other attack or any movement
of the mouse also due to a simple scrolling, so we saved by refreshing, we would see that the positioning
is the same of absolute which gets overlapped to the rest of the content.
But in this case, by scrolling, this will anyway remain fixed in the same position after fixed.
There's also the relative position which if I save and refresh, as you see, will not produce any type
of change compared to this static position, because with a relative function, if I insert left 50
pixels, for example.
Life saving and refreshing as you see the physician property, we move our heading 50 fixer's away starting
from the left, because the relative position enables to modify these the kiss of the of a certain tack
in the age.
al-Sheik adjusting it away from his normal position from left to right, above or below, according
to the other properties inserted inside our selector.
Therefore, as you see the positioning as well, according to the type of device topic we will see in
the development of our responsive sites, would permit Bazine on the resolution of the device itself
to position any target present in our stylesheets in a certain way.