CSS - position Property

Previous
Quiz
Next

The position Property

CSS position property specifies the position of an element in a web page. CSS properties such as top, bottom, right, and left are used to control the exact position of an element in the web page.

The position property can be used to create floating elements, a floating sidebar, and other interactive features.

Syntax

The syntax for the CSS position property is as follows:

position: static | relative | absolute | fixed | sticky;

Possible Values

Value Description
static It is the default value where the element is positioned according to the 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 original position is according to the normal flow of the page just like static value. But now the left/right/top/bottom/z-index will work.
absolute The element is completely removed from the document flow. It is then positioned with respect to its nearest positioned ancestor element. The positioned element should be any value except static.
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". It behaves as relative till it reaches the scrolling position, then behaves as fixed.

Applies To

The position property can be applied to all elements.

CSS position Property with static Value

The position property for the div element in this example is set to static. The left, right, top, and bottom properties will have no effect on the div element.

Example

The following example sets the position property of the div element to static.

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

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

CSS position Property with relative Value

The following example sets the position property of the div element to relative. This allows you to set the top, bottom, left, and right positioning of the div element.

Example

In this example, we have used position: relative; to set the positioning of the child element to relative.

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

CSS position Property with absolute Value

You can use absolute value to set the position of an element relative to its nearest ancestor element.

Example

In this example, we have used position: absolute; to position the child element relative to its nearest positioned container.

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

CSS position Property with fixed Value

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

In this example, we have used position: fixed; to create a fixed position of paragraph on the div.

<html>
<head>
<style>
   .container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .box {
      position: fixed;
      top: 15px;
      left: 60px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="container">
      <p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p>
      <p class="box">Tutorials point CSS Position Fixed</p>
      <p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p>
   </div>
</body>
</html>

CSS position Property with sticky Value

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. It is a combination of the position: relative and position: fixed properties.

Example

In this example, we have applied position: sticky; on a paragraph element that scrolls until a specified position then sticks at one place.

<html>
<head>
<style>
   .container {
      width: 400px;
      height: 200px;
      background-color: #f2c3ee;
      overflow: auto;
      padding: 5px;
   }
   .box {
      position: sticky;
      top: 15px;
      padding: 5px;
      background-color: #bbedbb;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="container">
      <p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p>
      <p class="box">Tutorials point CSS Position Sticky</p>
      <p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p>
      <p>Each version of CSS builds upon the previous ones, adding new features and refining existing capabilities to meet the evolving needs of web developers and designers. CSS is referred as just CSS now, without a version number.</p>
   </div>
</body>
</html>

Positioning Text In an Image Using CSS

To position the text in different directions, you can use the position: absolute property.

Example

In this example, we have used the absolute value to position the text elements in different directions on the image. The text elements are positioned at the center, top left, top right, bottom left, and bottom right corners.

<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="/css/images/pink-flower.jpg" alt="Pink flower" 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 the 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 Sets the positioning model for an element.
vertical-align Sets the vertical positioning of an element.
z-index Sets the rendering layer for the current element.
Print Page
Previous
Next
Advertisements