This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



Left

We will learn about CSS left property in this chapter.

The CSS left property specifies part of the position of positioned elements.

The left property is used to set the left margin edge of the element and the left edge of its containing block for absolute or fixed positioned elements. If position is selected "static", left property won't have any effect.

CSS Syntax

left: auto | length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
           img {
                position: absolute;
                left: 25px;
           }
      </style>
   </head>
   <body>

      <img src="//www.w3docs.com/bundles/w3book/images/logo.png?v4" width="146" height="41">

   </body>
</html>

Here the result is:



Let's see another example:

<!DOCTYPE html>
<html>
   <head>
      <style>
           div{
            height:150px;
            width:400px;
            background-color: #2d2d2d;
            color: #ffffff;
           }
           img {
                position: absolute;
                left: 150px;
                top:60px;
           }
      </style>
   </head>
   <body>

      <img src="//www.w3docs.com/bundles/w3book/images/logo.png?v4" width="146" height="41">
      <div> This is some div element.</div>

   </body>
</html>

Property Values

Value Descriptions
auto When we use this, the browser will set the left edge position. It is the default value of this property.
length It sets the left edge position with px, cm etc. and we can use negative values.
% It sets the left edge position with % of containing element. We can use negative values.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.