Premium Features

Download Video

Position Absolute

Published 2 months ago

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.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.