Absolute Positioning

An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the 'top-left' corner of the browser window. The box's offsets further can be specified using one or more of the properties top, right, bottom, and left.

Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, it can overlap other elements depending on the z-index property value. Also, an absolutely positioned element can have margins, and they do not collapse with any other margins.

Example of Code

<style type="text/css">
  .Example-absolute {
        position: absolute;
        top: 100px;
        left: 60px;
        background-color: gold;
        width: 90px;
        padding: 20px;
    <div class="Example-absolute">
        This div is absolutely positioned containing block.


        This div is absolutely positioned containing block.