Aligning elements using the position property in CSS

We can align elements using the CSS positioning schema methods (fixed, relative, absolute and static) and properties (left, right, top and bottom).

To align elements in CSS, use the position property. The position can be set using the following values −

  • static

  • relative

  • fixed

  • absolute

  • sticky

For example, the following is achieved by aligning divs on a web page using the position property −

Align Elements With Absolute and Relative Positions

Example

Let’s see an example to align elements using the positioning schema. We have shown the absolute and relative positions here −

<!DOCTYPE html>
<html>
<head>
   <title>Alignment using CSS Position</title>
   <style>
      .screen {
         padding: 10px;
         width: 70%;
         margin: 0 auto;
         background-color: #f06d06;
         text-align: center;
         color: white;
         border-radius: 0 0 50px 50px;
         border: 4px solid #000;
      }
      .backSeats div{
         margin: 10px;
         padding: 10px;
         color: white;
         border: 4px solid #000;
         background-color: #dc3545;
      }
      .rightAbsolute{
         position: absolute;
         right: 0px;
         top: 80px;
      }
      .backLeftSeat{
         background-color: #dc3545;
         max-height: 100px;
         height: 70px;
         margin: 20px;
         width: 300px;
         display: inline-block;
         position: relative;
         resize: vertical;
         overflow: auto;
         border: 4px solid #000;
      }
      .withPosition{
         position: absolute;
         top: 50%;
         left: 20px;
         right: 20px;
         color: white;
         padding: 20px;
         transform: translateY(-50%);
      }
   </style>
</head>
<body>
   <div class="screen">Screen</div>
   <div class="backLeftSeat">
      <div class="withPosition">Premium    Readjustable Sofa</div>
   </div>
   <div class="backSeats">
      <div class="rightAbsolute">Premium Absolute Positioned Seat</div>
   </div>
   </div>
</body>
</html>

Align Elements With Absolute, Relative and Fixed Positions

Example

Let’s see another example to align elements using the positioning schema. We have shown the absolute, fixed and relative positions here −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         border: 2px double #a43356;
         margin: 5px;
         padding: 5px;
      }
      #d1 {
         position: relative;
         height: 10em;
      }
      #d2 {
         position: absolute;
         width: 20%;
         bottom: 10px; /*relative to parent d1*/
      }
      #d3 {
         position: fixed;
         width: 30%;
         top:10em; /*relative to viewport*/
      }
   </style>
</head>
<body>
   <div id="d1">In HBase, tables are split into regions and are served by the region servers. Regions are vertically divided by column families into “Stores”. Stores are saved as files in HDFS. HBase has three major components: the client library, a master server, and region servers. Region servers can be added or removed as per requirement.<mark>relative</mark>
      <div id="d2"><mark>absolute</mark></div>
      <div id="d3"><mark>fixed</mark></div>
   </div>
</body>
</html>

Updated on: 27-Oct-2023

70 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements