position: absolute;
is a CSS property that'll take whatever element it is applied to out of the document flow. Once taken out of the document flow, you can apply sub-properties such as top
, right
, bottom
, and left
to move this element around. Where your element is moved to is dependent on the element's first parent container which has a position of relative
. If you were to apply top: 20px;
to an element with position absolute
, it would be placed twenty pixels from the top of it's parent div that contains a position of relative
:
<section class="relative">
<div class="absolute" style="top: 20px;"></div>
</section>
Absolute elements are almost always used with position relative elements, so be sure to check which parents have that relative class if you're struggling to move your absolute element to the correct position.