Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Position Property to Align Elements

Using CSS Position property to Align Elements

Five main values of CSS Positions: position: static | relative | absolute | fixed | sticky

and helper properties for setting the coordinates of an element top | right | bottom | left | z-index These properties don't work without a declared position, or with static

z-index : As value increases, it moves in front of other elements, doesn't work with position: static or w/o a declared position

Static

position: static Default value if no value for position is specified.

Example:

 <body>
      <div class="box-red"></div>
      <div class="box-blue"></div>
 </body>
 .box-red {
     background: red;
     height: 100px;
     width: 100px;
 }
 
 .box-blue {
     background: blue;
     height: 100px;
     width: 100px;
 }

Divs are block elements by default, red div will appear atop of blue div.

Code Pen: Static position demo

Relative

position: relative Element's new position is relative to its normal position. However, we need helper properties to set coordinates.

.box-red {
    position: relative;
    background: orange;
    height: 100px;
    width: 100px;
    top: 100px; // 100px from top
    left: 100px; // 109px from left relative to old position 
 }

Now the red box will be appearing side by side with the blue box.

Code Pen: Relative position demo

NOTE : Setting relative for an element, doesn't affect other element's positions

Absolute

position: absolute An absolute positioned element is relative to its parent.

Element with position:absolute is removed from normal document flow and positioned automatically to the starting point (top left corner) of the parent element. If no parent elements are present, initial document will be its parent.

The removal affects other elements, and these other elements behaves as though element is removed completely from the webpage.

<body>
    <div class="container">
        <div class="box-red"></div>
        <div class="box-blue"></div>
    </div>
</body>
.box-red {
    position: absolute;
    background: red;
    width: 100px;
    height: 100px;
}
.container {
    position: relative;
    background: lightgrey;
}
// container must have position: relative so the absolutely positioned child stay inside of the parent

This is because it behaves like the red box is removed and shifts up to the red box's place

.box-red {
    position: absolute;
    background: red;
    width: 100px;
    height: 100px;
    right: 5px; // 5px relative to the most-right of parent
}

Code Pen: Absolute position demo

Fixed

position: fixed. Fixed position elements are also removed from normal document flow. However, they are only relative to html document, not any other parents. Not affected by scrolling.

Sticky

position: sticky Mixture of position: relative and position: sticky

NOTE : NOT supported by Internet Explorer or early versions of edge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment