CSS Position

The position property specifies that an element is positioned.

Positioned elements do not participate in the standard HTML document flow.

Instead they specify their position relative to a container element.

Valid position values include fixed, absolute, sticky, and others.

Example

#

This example has two positioned <div> elements.
The container is relative. The red, inner element is absolute. .

<style>
  .relative-div {
    position: relative;
    max-width: 400px;
    height: 200px;
    border: 1px solid #ddd;
    background: aliceblue;
  }

  .absolute-div {
    position: absolute;
    top: 60px;
    left: 40px;
    height: 60px;
    width: 60px;
    background-color: red;
  }
</style>

<div class="relative-div">
  <div class="absolute-div"></div>
</div>

Using position

The position property indicates what positioning method the element will follow.

Valid values include: static, relative, fixed, absolute, and sticky.

A positioned element uses the top, right, bottom, and left properties to align itself inside its container.

Position: static

The default position value for elements is static.

Static elements are positioned according to the normal page flow.

A static position is not affected by top, right, bottom, and left properties.

An element with a static position. This is the default.

Position: static
<div style="position: static;
            border: 3px solid #6266f1;
            padding: 15px;">
  Position: static
</div>

Position: relative

Any element with position: relative is positioned relative to its normal position.

The top, right, bottom, and left properties move the element from its original position.

Elements with position: relative are often used as containers for position: absolute elements.

An element with relative position. It has an adjusted left position.

Position: relative
<style>
  .position-relative {
    position: relative;
    max-width: 250px;
    left: 50px;
    border: 3px solid #6266f1;
    padding: 15px;
  }
</style>

<div class="position-relative">
  Position: relative
</div>

Position: fixed

An element with position: fixed is positioned relative to the viewport.

These elements stay fixed regardless of the page scrolling status.

The top, right, bottom, and left properties are used to accurately place the element.

This <div> element displays at a bottom right fixed position.
Click 'try it live' to see this in action.

<style>
  .position-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    border: 3px solid teal;
    padding: 15px;
  }
</style>

<div class="position-fixed">
  Position: fixed
</div>

Position: absolute

An element with position: absolute is positioned relative to the nearest positioned parent.

The top, right, bottom, and left properties align the element relative to its nearest positioned container.

An absolute positioned element inside a relative parent container.

Position: relative
Position: absolute
<style>
  div.relative {
    position: relative;
    max-width: 400px;
    height: 200px;
    border: 3px solid #6266f1;
    padding: 15px;
  }

  div.absolute {
    position: absolute;
    bottom: 10px;
    right: 40px;
    width: 200px;
    height: 100px;
    border: 3px solid #c6d2fe;
    padding: 15px;
  }
</style>

<div class="relative">
  Position: relative
  <div class="absolute">Position: absolute</div>
</div>

Position: sticky

An element with position: sticky is positioned based on the page's scroll position.

A sticky element toggles between relative and fixed depending on scroll position.

The element is positioned relative, until a given offset position is met in the viewport.

Once the offset is met, the element sticks in place like a fixed positioned element.

This <div> element will be displayed in sticky position at top.

<style>
  div.sticky {
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #ff7461;
    border: 2px solid #F45D48;
    color: white;
  }
</style>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom: 400px">
  <p>
    The sticky element sticks to the top 
    of the page (top: 0), when reaching 
    its scroll position.
  </p>
  <p>Scroll to see stickyness.</p>
</div>

Overlapping Elements

Positioned elements can overlap other elements.

Use the z-index property to specify the stack order of an element.

Higher z-index values are in front, while lower value elements are behind.

This image is absolutely positioned, so it does not follow the normal page flow. With a negative z-index it then displays behind the transparent overlay element.

The image has a lower z-index and is placed behind this overlay
<style>
  .overlay-img {
    position: absolute;
    z-index: -1;
  }

  .overlay-text {
    background: rgba(255,255,255,0.7);
    padding: 20px;
    font-size: 18px;
    width: 300px;
  }
</style>

<img src="/img/css/sunflowers.jpg"
     class="overlay-img" />
<div class="overlay-text">
  The image has a lower z-index and is
  placed behind this overlay
</div>

For details on z-index, see our CSS z-index Property Reference.


Did you know?

Did you know?

Position elements perfectly centered

Any element can be positioned perfectly in the center of a container.

The element must be positioned 50% from its top and left original position.

Using the transform property, anything can be placed in perfect center.

This square element is positioned horizontally and vertically in the center of the container.

<style>
  .center-box {
    position: relative;
    background: #dfe7ff;
    height: 200px;
    max-width: 300px;
  }

  .center-item {
    position: absolute;
    height: 25px;
    width: 25px;
    background-color: navy;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="center-box">
  <div class="center-item">
  </div>
</div>


CSS Positioning Properties

These are CSS properties that are used for positioning elements.

Property Description
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
z-index Sets the stack order of an element

You may also like

Guides