What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

[TIPS] position: absolute CSS


New member
CSS position property comes of great use while positioning the elements on the web page. It comes with static, CSS sticky, absolute, relative, and fixed options. These values serve different purposes in defining the location of an element. Among them, position value absolute is something whose expertise will help you a lot in your web development career. It gives you more control over the elements and takes them out of the document’s normal flow.

An element with the position set as absolute can be positioned at a fixed location for all the situations you encounter in cross browser testing. However, the element will take the position relative to the first ancestor with the property set as absolute or relative. If no such element exists, the position takes reference from the root element, i.e., HTML.

The following code places two div boxes with one as position: absolute.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Position Absolute</title>

  div.relative {
      position: relative;
      width: 300px;
      height: 250px;
      border: 2px solid #000000;

  div.absolute {
      position: absolute;
      top: 70px;
      right: 10px;
      width: 150px;
      height: 80px;
      border: 2px solid #000000;

    <div class = "relative">My position is relative.

    <div class = "absolute">My position is absolute.</div>



The output is rendered as follows.

The output is rendered

Output on mobile.

Output on mobile

One important thing to remember is that the element with the position as absolute does not affect the other elements. It also does not affect any other element, which can create design issues later if you are not careful.