left - HTML CSS CSS Property

HTML CSS examples for CSS Property:left

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. left

Description

The left CSS property sets the left edge offset of the positioned element, relative to the left edge of the reference element's box or browser window.

For absolutely positioned elements, the left property sets how far the left edge of the element's box is offset to the right of the left edge of its containing block.

For relatively positioned elements, the left property sets the offset to the left edge of the box itself.

The following table summarizes the left Property.

Item Value
Default value: auto
Applies to:Positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


left:      length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the offset as a length value in px, pt, cm, em, etc. Negative length values are allowed.
percentage Set the offset in percentage. The percentage is calculated against the width of the element's containing block. Negative percentage values are allowed.
auto The browser calculates the left edge position. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element left property.

The example below shows the left property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS left property</title>
  <style type="text/css">
    p {<!--from w ww.  j  av a  2  s. c  o  m-->
    width: 200px;
    position: absolute;
        left: 150px;
        padding: 20px;
        font: bold 18px sans-serif;
        background: #9acd32;
    }
</style>
 </head>
 <body>
  <p>Play with the left property value to see how it works.</p>
 </body>
</html>

Related Tutorials