<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
</
head
>
<
body
class
=
"m-2"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"mb-4"
>
Bootstrap 5 Position values
</
h4
>
<
div
class
=
"container mt-4 bg-light"
>
Position: sticky is means that the top, right,
bottom, and left properties will be the same no matter
<
p
class="position-static bg-success top-50
start-50 text-light">
This paragraph has position: static;
</
p
>
This part is out of the paragraph.
</
div
>
<
div
class
=
"container mt-4 bg-light"
>
Position: relative sets its position to be relative
with respect to the elements on top of it
<
p
class="position-relative bg-success top-50
start-50 text-light w-50">
This paragraph has position: relative;
</
p
>
This means that the top, right, bottom, and
left properties will
affect the position of the Paragraph.
</
div
>
<
div
class
=
"container mt-4 bg-light"
>
Position: absolute sets its position relative to
the closest parent and it set its position absolute
with that
<
p
class="position-absolute bg-success bottom-0
end-50 text-light">
This paragraph has position: absolute;
</
p
>
This means that the top, right, bottom, and left
properties will get adjusted with respect to the
nearest ancestor and then the position is set.
</
div
>
</
body
>
</
html
>