CSS Data Type - <position>

CSS datatype <position> represents a positioning behavior of an HTML element within its containing element. It is used to set a location relative to an element box or another element.

<position> is used with background-position for background images, object-position, mask-position, offset-position, offset-anchor, and transform-origin.

Following diagram depicts all the positions of an element:

  • One or two keywords and optional offsets are used to specify the <position> data type in CSS.

  • The terms center, top, right, bottom, and left are accessible. These keywords match the center lines or outside boundaries of the box of an element.

  • The middle term can indicate either the midpoint between the top and bottom edges or the midpoint between the left and right sides, depending on the context.

  • The <position> data type allows for the expression of offsets as either absolute <length> values or relative <percentage> values.

  • Negative values cause the element to move in the opposite direction from positive values, which causes it to move to the right or bottom. The x-coordinate is determined if only one offset is given; the value for the other axis defaults to the center.

Syntax

<position> = [ left | center | right | top | bottom | <length-percentage> ]  |
[ left | center | right ] && [ top | center | bottom ]  |
[ left | center | right | >length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

CSS <position> - Valid Positions

  • center

  • left

  • center top

  • right 5.5%

  • bottom 15vmin right -3px

  • 15% 25%

  • 4rem 22px

CSS <position> - Invalid Positions

  • left right

  • bottom top

  • 10px 15px 20px 15px

CSS <position> - Relative Position

The following example demonstrates the use of <position> data type in the CSS property background-position, where the values passed are relative i.e. center and left. The linear gradient is placed at the center-left of the page.

<html>
<head>
<style>
   body {
      height: 200px;
      background-color: #222;
      background-image: radial-gradient(circle at center, red, green 3em);
      background-size: 15em 10em, 30% 70%, 100px 70px;
      background-position: center left;
      background-repeat: no-repeat no-repeat;
   }
</style>
</head>
<body>  
</body>
</html>

CSS <position> - Absolute Position

The following example demonstrates the use of <position> data type in the CSS property position, along with other properties such as top, left, right, and bottom, where the values passed are relative and absolute.

<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> - Fixed Position

The following example demonstrates the use of <position> data type in the CSS property position where the value passed is fixed.

<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>
Advertisements