Relative Positioning Explained
Relative positioning allows us to position an element visually relative to its original positioning. At the same time, the neighboring elements do not take the element's place.
position: relative;
We can use the properties of top
, left
, bottom
, and right
to indicate the visual displacement of an element with respect to its initial position. The values can be positive and negative in different units (px
, %
, etc.). Let's run the following example to see what effect we can get:
index.html
index.css
Note
It is essential to mention that there is no need to specify all
top
,bottom
,left
, andright
properties for the element with the position value that differs from thestatic
. It is enough to set one property for the vertical positioning (top
orbottom
) and one for the horizontal positioning (left
orright
).
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.04
Relative Positioning Explained
Sveip for å vise menyen
Relative positioning allows us to position an element visually relative to its original positioning. At the same time, the neighboring elements do not take the element's place.
position: relative;
We can use the properties of top
, left
, bottom
, and right
to indicate the visual displacement of an element with respect to its initial position. The values can be positive and negative in different units (px
, %
, etc.). Let's run the following example to see what effect we can get:
index.html
index.css
Note
It is essential to mention that there is no need to specify all
top
,bottom
,left
, andright
properties for the element with the position value that differs from thestatic
. It is enough to set one property for the vertical positioning (top
orbottom
) and one for the horizontal positioning (left
orright
).
Takk for tilbakemeldingene dine!