Skip to content
Related Articles

Related Articles

Improve Article
CSS | left Property
  • Last Updated : 14 Jan, 2019

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.






<!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.




<!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
  • Internet Explorer 5.5
  • Firefox 1.0
  • Safari 1.0
  • Opera 5.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :