Open In App

CSS |eft Property

Improve
Improve
Like Article
Like
Save
Share
Report

The left property in CSS is used to specify the horizontal position of a positioned element. It has no effect on non-positioned elements. 

Note:

  • If position property is absolute or fixed, the left property specifies the distance between the element left edge and the left edge of its containing block.
  • If position property is relative, the left property specifies the distance of element left edge is moved to the right from its normal position.
  • If position property is sticky, the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position property is static, the left property has no effect.
  • If both left and right properties are defined, the left value has precedence when the container is left-to-right and the right value has precedence when the container is right-to-left.

Syntax:

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

Property Values:

  • length: It is used to specify the length of left property. It accepts positive and negative values.
  • percentage: It specifies the width of the containing block in percentage.
  • auto:It is used to set left property to its default value.
  • initial: It is used to specify the left property to its default value.
  • inherit: It sets the left property from its parent.

Example 1: This example describes the position property to absolute. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS left Property
    </title>
    <style>
        body {
            color: Green;
            text-align: center;
        }
 
        .GFG1 {
            position: absolute;
            left: 129px;
            width: 500px;
            height: 200px;
            border: 5px solid orange;
        }
 
        .GFG2 {
            position: absolute;
            left: 77%;
            width: 140px;
            height: 70px;
            border: 5px solid red;
        }
 
        .GFG3 {
            position: absolute;
            left: auto;
            width: 350px;
            height: 170px;
            border: 5px solid green;
        }
 
        .GFG4 {
            position: absolute;
            left: initial;
            width: 200px;
            height: 100px;
            border: 5px solid maroon;
        }
 
        .GFG5 {
            position: absolute;
            left: inherit;
            width: 200px;
            height: 100px;
            border: 5px solid black;
        }
    </style>
</head>
 
<body>
    <h1>The left Property</h1>
 
    <div class="GFG1">length
        <div class="GFG2">percentage</div>
        <div class="GFG3">auto</div>
    </div>
    <div class="GFG4">initial</div>
    <div class="GFG5">inherit</div>
</body>
</html>


Output:

  

Note: The containers of initial and inherit overlap because of having similar dimensions and value defaults. 

Example 2: This example describes the position property to relative. 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS left Property
    </title>
 
    <style>
        body {
            color: Green;
            text-align: center;
        }
 
        .GFG1 {
            position: relative;
            left: 129px;
            width: 500px;
            height: 200px;
            border: 5px solid orange;
        }
 
        .GFG2 {
            position: relative;
            left: 77%;
            width: 140px;
            height: 70px;
            border: 5px solid red;
        }
 
        .GFG3 {
            position: relative;
            left: auto;
            width: 350px;
            height: 170px;
            border: 5px solid green;
        }
 
        .GFG4 {
            position: relative;
            left: initial;
            width: 200px;
            height: 100px;
            border: 5px solid maroon;
        }
 
        div.e {
            position: relative;
            left: inherit;
            width: 200px;
            height: 100px;
            border: 5px solid blue;
        }
    </style>
</head>
 
<body>
    <h1>The left Property</h1>
 
    <div class="GFG1">length
        <div class="GFG2">percentage</div>
        <div class="GFG3">auto</div>
    </div>
    <div class="GFG4">initial</div>
    <div class="GFG4">inherit</div>
</body>
</html>


Output:

  

Supported Browsers: The browser supported by left property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 5.5 and above
  • Firefox 1.0 and above
  • Safari 1.0 and above
  • Opera 5.0 and above


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads