/    /  CSS left property

CSS left property

 

This property specifies an offset for the left edge of the positioned element, relative to the left edge of the reference element’s box/browser window.

Absolutely position: The left property specifies how far the left edge of the element’s box is offset to the right of the left edge of its containing block.

Relatively position: The left property specifies the offset with respect to the left edge of the box itself.

 

Syntax:

 

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

 

Property Values:

 

  • auto: The browser to calculate the left edge position.
  • length: The position of left property in px, cm, pt, etc.
  • percentage: the position of left property in percentage (%).
  • initial: Property to its default value.
  • inherit: Property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>

div{
position: absolute;
width: 200px;
height: 200px;
font-size: 30px;
}
#len {
left: 250px;
border: 5px solid lightgreen;
}
#per {
left: 65%;
border: 5px solid blue;
}
#auto {
left: auto;
border: 8px solid yellow;
font-size: 40px;
}

</style>
</head>

<body>
<h1> Example of the left Property </h1>

<div id = "len"> left: 250px; </div>
<div id = "per"> left: 65%; </div>
<div id = "auto"> left: auto; </div>
</body>
</html>

 

OUTPUT:

 

CSS left property 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>

div{
position: relative;
width: 150px;
height: 100px;
font-size: 30px;
}
#len {
left: 250px;
border: 5px solid lightgreen;
}
#per {
left: 65%;
border: 5px solid blue;
}
#auto {
left: auto;
border: 5px solid red;
}

#init {
left: initial;
border: 5px solid lightblue;
}

</style>
</head>

<body>
<h1> Example of the left Property </h1>

<div id = "len"> left: 250px; </div>
<div id = "per"> left: 65%; </div>
<div id = "auto"> left: auto; </div>
<div id = "init"> left: initial; </div>
</body>
</html>

 

OUTPUT:

 

CSS left property