CSS - left



The left property of CSS is used to specify the horizontal position of a positioned element relative to its containing element. It determines the left edge position of an element.

Based on the value of the position property, the effect of left property, is determined.

Position value Bottom property
absolute or fixed Specifies the distance between element's left edge's outer margin amd the inner border of the container's left edge.
relative Specifies the distance the element's left edge is moved to the right from its normal position.
sticky Used to compute the sticky-constraint rectangle.
static No effect on the element.

The element will stretch to satisfy the values of left and right, when both are specified, and width constraints are not preventing it.

In the scenario, when the element can not stretch itself, the left value has precedence over right, when container is left-to-right. And when container is right-to-left, the right value takes precedence over left.

Possible Values

  • <length> − Can specify a negative, null or positive value.

  • <percentage> − Percentage of the container's width.

  • auto − Default value. Browser calculates the left position.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.left = "2px";

CSS left - With Absolute Position

The following example shows how to use the position: absolute property and left property to position an element to the left of its parent element −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .absolute-box {
      position: absolute;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .left{
      left: 0;
   } 
   .left-px {
      left: 60px;
   } 
   .left-per {
      left: 30%;  
   } 
   .left-em {
      left: 2em;  
   } 
      .left-auto {
      left: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="absolute-box left">
         Absolute positioning with 0 left margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box left-px">
         Absolute positioning with 60px left margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box left-per">  
         Absolute positioning with 30% left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      <div class="absolute-box left-em">
         Absolute positioning with 2em left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
         <div class="absolute-box left-auto">
         Absolute positioning with auto left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
   </div>
</body>
</html>

CSS left - With Fixed Position

The following example demonstrates how to use the position: fixed property and the left property to position an element to the left edge of the viewport and keep it in the same place even when the page is scrolled −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .fixed-box {
      position: fixed;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .left {
      left: 0;
   } 
   .left-px {
      left: 60px;
   } 
   .left-per {
      left: 30%;  
   } 
   .right-em {
      left: 2em;  
   } 
   .left-auto {
      left: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="fixed-box left">
         Fixed positioning with 0 left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box left-px">
         Fixed positioning with 60px left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box left-per">  
         Fixed positioning with 30% left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box left-em">
         Fixed positioning with 2em left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box left-auto">  
         Fixed positioning with auto left margin.
      </div>
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS left - With Relative Position

The following example demonstrates how to use the position: relative property and the left property to move an element from the left edge to the left of its normal position −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      margin-left:10%;
   }
   .relative-box {
      position: relative;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .left {
      left: 0;
   } 
   .left-px {
      left: 30px;
   } 
   .left-per {
      left: 10%;  
   } 
   .left-em {
      left: 1em;  
   } 
   .left-auto {
      left: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="relative-box left">
         Relative positioning with 0 left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box left-px">
         Relative positioning with 30px left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box left-per">  
         Relative positioning with 10% left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box left-em">
         Relative positioning with 1em left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box left-auto">  
         Relative positioning with auto left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>

CSS left - With Static Position

The following example demonstrates that the left property will have no effect on the positioning of an element if the position property is set to static

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .static-box {
      position: static;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .left {
      left: 0;
   } 
   .left-px {
      left: 60px;
   } 
   .left-per {
      left: 30%;  
   } 
   .left-em {
      left: 2em;  
   } 
   .left-auto {
      left: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="static-box left">
         Static positioning with 0 left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box left-px">
         Static positioning with 60px left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box left-per">  
         Static positioning with 30% left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box left-em">
         Static positioning with 2em left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box left-auto">  
         Static positioning with auto left margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>   

CSS left - With Sticky Position

The following example demonstrates how to use the position: sticky and left property to create an element that sticks to the viewport when the user scrolls −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      padding: 10px;
   }
   .sticky-container {
      position: relative; 
   }
   .sticky-box {
      position: sticky;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
      top: 10px;
   }
   .left {
      left: 0;
   } 
</style>
</head>
<body>
   <div class="box">
      <div class="sticky-container">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         <div class="sticky-box left">
            Sticky positioning with 0 left margin.
         </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </div>
   </div>
</body>
</html>
Advertisements