CSS - left Property

Quiz

CSS left property 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.

Syntax

left: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	The browser calculates the left position. Default.
length	It specifies the left edge position in length units (px, em, rem etc.). Negative values are allowed.
percentage	It specifies the left edge position in percentage relative to the containing element. Negative values are allowed.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Left Property

The following examples explain the left property with different values.

Left Property with Absolute Position

With the position: absolute, the left property determines the horizontal distance of the element's left edge to the nearest positioned ancestor. If no positioned ancestor exists, it is positioned from the initial containing block. This is shown in the following example. Different units for the distances have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .absolute-box {
         font-weight: bold;
         position: absolute;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: absolute
   </h4>
   <div class="box">
      <div class="absolute-box left">
         position:absolute; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-px">
         position:absolute; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-per">
         position:absolute; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-em">
         position:absolute; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-auto">
         position:absolute; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

Left Property with Fixed Position

With the position: fixed, the left property sets the distance of the element from the viewports left edge. The element maintains its position even during page scroll. This is shown in the following example. Different units for the distances have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .fixed-box {
         font-weight: bold;
         position: fixed;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: fixed
   </h4>
   <div class="box">
      <div class="fixed-box left-px">
         position: fixed; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="fixed-box left-per">
         position: fixed; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="fixed-box left-auto">
         position: fixed; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

Left Property with Relative Position

With the position: relative, the left property positions the element relative to the normal position. If positive values are given, the element moves towards the right and if negative values are given, the element moves towards the left without disturbing other elements. This is shown in the following example. Different units for the distances have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .relative-box {
         font-weight: bold;
         position: relative;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: relative
   </h4>
   <div class="box">
      <div class="relative-box left">
         position: relative; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-px">
         position: relative; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-per">
         position: relative; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-em">
         position: relative; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-auto">
         position: relative; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

Left Property with Static Position

With the position: static, the left property has no effect, the element is positioned according to the normal document flow. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .static-box {
         font-weight: bold;
         position: static;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: static
   </h4>
   <div class="box">
      <div class="static-box left">
         position: static; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-px">
         position: static; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-per">
         position: static; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-em">
         position: static; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-auto">
         position: static; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

Left Property with Sticky Position

With the position: sticky, the left property controls the elements position within its containing block until it reaches a defined threshold. After crossing this threshold during scrolling, the element behaves as if it is fixed, sticking to the position defined by the left property. This is shown in the following example. Different units for the distances have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         color: green;
         padding: 10px;
      }

      .sticky-container {
         position: relative;
      }

      .sticky-box {
         position: sticky;
         width: 130px;
         height: 60px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
         font-weight: bold;
         top: 10px;
      }

      .left {
         left: 40px;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: sticky
   </h4>
   <div class="box">
      <div class="sticky-container">
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="sticky-box left">
            position: sticky; left: 40px.
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      </div>
   </div>
</body>

</html>

Position value	Bottom property
absolute or fixed	It specifies the distance between element's left edge's outer margin and the inner border of the container's left edge.
relative	It specifies the distance the element's left edge is moved to the right from its normal position.
sticky	The property behaves like its position is relative when the element is inside the viewport like fixed when it is outside.
static	No effect of the left property on the element.

Supported Browsers

Property
left	1.0	5.5	1.0	1.0	5.0

css_reference.htm

Print Page