CSS - position


CSS Position Property

CSS property position helps manipulate position of an element in a web page. The properties top, bottom, right, and left are used to control its exact position on the page. They specify the offsets of an element from its edges

Property position can be used to create floating elements, floating sidebar, and other interactive features.

Following are the possible values:

  • static − The element is positioned according to the default or normal flow of the page. So if we set left/right/top/bottom/z-index, then there will be no effect on that element.

  • relative − The element's orginial position is according to normal flow of the page just like static value. But now left/right/top/bottom/z-index will work. The positional properties push the element from the original position in that direction.

  • absolute − The element is completely removed from the document flow. It is then positioned with respect to its containing block, and its edges are placed using the side-offset properties. An absolutely positioned element may overlap other elements, or be overlapped by them.

  • fixed − The element's fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. Here the element is totally removed from the document's flow and does not have a position relative to any part of the document.

  • sticky − The element sticks to the top of its nearest positioned ancestor that has a "scrolling mechanism" .

CSS Position - Demo

Try to select different values for CSS position property and then see the effect.

CSS Position - Static

When you use the CSS position: static property, the element will be positioned normally in the document flow. The left, right, top, bottom, and z-index properties will not affect the element. This is the default value.

Example

Here is an example −

<html>
<head>
<style>
   .normal-box {
      display: inline-block;
      background-color: #f2c3ee;
      border: 1px solid #000000;
      padding: 10px;
      margin-bottom: 20px;
      width: 300px;
      height: 100px;
   }
   .static-box {
      display: inline-block;
      position: static;
      background-color: #bbedbb;
      border: 1px solid #000000;
      padding: 10px;
      width: 300px;
      height: 100px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a normal box.</p>
   </div>

   <div class="static-box">
      <h2>Position: static</h2>
      <p>This is a box with static position.</p>
   </div>
</body>
</html>

CSS Position - Relative

The CSS position: relative property positions the elements relative to their original position in the page. You can use the left, right, top, and bottom properties to move the element around, but it will still take up space in the document flow.

Example

Here is an example −

<html>
<head>
<style>
   .normal-box {
      display: inline-block;
      background-color: #f2c3ee;
      border: 1px solid #000000;
      padding: 10px;
      margin-bottom: 20px;
      width: 300px;
      height: 100px;
   }
   .relative-box {
      display: inline-block;
      position: relative;
      left: 30px;
      background-color: #bbedbb;
      border: 1px solid #000000;
      padding: 10px;
      width: 300px;
      height: 100px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a normal box.</p>
   </div>
   <div class="relative-box">
      <h2>Position: relative</h2>
      <p>This is a box with relative position.</p>
   </div>
</body>
</html>

CSS Position - Absolute

An element with position: absolute is taken out of the document flow and positioned relative to its nearest positioned ancestor (if any). If there is no positioned ancestor, then the element is positioned relative to the viewport.

You can use top, right, bottom, and left properties to specify the position of the element relative to its containing block.

Example

Here is an example −

<html >
<head>
<style>
   .normal-box {
      background-color: #f2c3ee;
      border: 1px solid #333;
      padding: 10px;
      margin-bottom: 20px;
      width: 350px;
      height: 100px;
   }
   .absolute-box {
      background-color: #bbedbb;
      border: 1px solid #333;
      padding: 10px;
      position: relative;
      width: 300px;
      height: 100px;
      left: 20px;
      bottom: 20px;
   }
</style>
</head>
<body>
   <div class="normal-box">
      <h2>Normal Box</h2>
      <p>This is a Noraml box.</p>
      <div class="absolute-box">
         <h2>Position: Absolute</h2>
         <p>This is a box with absolute position.</p>
      </div>
   </div>
</body>
</html>

CSS Position - Fixed

To make an element stay in the same place on the screen even when the user scrolls, you can set the position property to fixed. You can then use the left, right, top, and bottom properties to position the element where you want it.

Example

Here is an example −

<html>
<head>
<style>
   .position_container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .fixed-position {
      position: fixed;
      top: 15px;
      left: 60px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="position_container">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</body>
</html>

CSS Position - Sticky

You can set the position property to sticky to create an element that sticks to the top of the viewport when the user scrolls through a page.

The position: sticky property is a combination of the position: relative and position: fixed properties

Example

Here is an example −

<html>
<head>
<style>
   .position_container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .sticky-position {
      position: sticky;
      top: 15px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="position_container">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</body>
</html>

CSS Positioning Text In an Image

In following example, you can use the position: absolute property to position text in different directions. The text elements are positioned at the top left, top right, bottom left, and bottom right corners.

Example

Here is an example −

<html>
<head>
<style>
   .container {
      position: relative;
      border: 2px solid #ef2c2c;
   }
   .center {
      position: absolute;
      top: 45%;
      width: 100%;
      text-align: center;
   }
   .top-left {
      position: absolute;
      top: 12px;
      left: 30px;
   }
   .top-right {
      position: absolute;
      top: 12px;
      right: 30px;
   }
   .bottom-left {
      position: absolute;
      bottom: 12px;
      left: 30px;
   }
   .bottom-right {
      position: absolute;
      bottom: 12px;
      right: 30px;
   }
   img {
      width: 100%;
      opacity: 0.3;
   }
</style>
</head>
<body>
   <div class="container">
      <img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px">
      <h3 class="center">Text at Centered</h3>
      <h3 class="top-left">Text at Top Left</h3>
      <h3 class="top-right">Text at Top Right</h3>
      <h3 class="bottom-left">Text at Bottom Left</h3>
      <h3 class="bottom-right">Text at Bottom Right</h3>
   </div>
</body>
</html>

CSS Position - Related Properties

Following is the list of all the CSS properties related to position:

Property Description
bottom

Used with the position property to place the bottom edge of an element.

clip

Sets the clipping mask for an element.

left

Used with the position property to place the left edge of an element.

overflow

Determines how overflow content is rendered.

position

Sets the positioning model for an element.

right

Used with the position property to place the right edge of an element.

top

Used with the position property to place the top edge of an element.

vertical-align

Sets the vertical positioning of an element.

z-index

Sets the rendering layer for the current element.

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements