BlogsDope image BlogsDope

CSS left

Jan. 5, 2018 HTML CSS 1814

The CSS left property specifies the position of the left edge of a positioned element. Positioned elements are the elements whose position value is anything except static.

Let's understand how this property works by looking at its effect on different positioned elements. Also note that the default positioning of an element is static.

CSS

left: value;

Relatively Positioned

If an element is relatively positioned, then the left property adds an offset to the element's left edge which moves it to the right from its normal flow.

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

#div1 {
  width: 100px;
  height: 100px;
  background-color: #1E73A6;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  left: 40px;
  position: relative;
}

See the Pen CSS left property with position: relative by Aakhya Singh (@aakhya) on CodePen.

In the above example, the green box is given position: relative. Thus, giving left: 40px shifted it 40px towards the right from its normal flow.

Absolutely Positioned

For absolutely positioned elements (i.e. those having position: absolute or position: fixed), this property shifts the left edge of the element towards the right from the left edge of its nearest parent container having some positioning (other than static) or the document.

To understand it better, look at the following example in which the property is applied to an absolutely positioned element which has no positioned parent.

HTML

<div id="div1">
  <div id="div2"></div>
</div>

CSS

#div1 {
  height: 170px;
  margin-left: 70px;
  background-color: #1E73A6;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 40px;
}

See the Pen CSS left property with position: absolute by Aakhya Singh (@aakhya) on CodePen.

Here, the green box is given position: absolute. Since its parent div is not positioned, therefore giving left: 40px shifted it 40px towards the right from the left margin of the document.

Now consider another example given below in which the parent div is given position: relative and observe the green box getting shifted 40px towards the right from the left edge of the parent div.

HTML

<div id="div1">
  <div id="div2"></div>
</div>

CSS

#div1 {
  height: 170px;
  margin-left: 70px;
  background-color: #1E73A6;
  position: relative;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 40px;
}

See the Pen CSS left property with position: absolute by Aakhya Singh (@aakhya) on CodePen.

Now let's look at the different values that the left property can take.

Values

auto : Lets the browser decide the position of the left edge of the element. This is the default value.

<length> : Specifies the position of the left edge in px, pt, em, ex, etc. Negative values are allowed.

<percentage> : Specifies the position of the left edge in percentage with respect to the container element's width. Negative values are allowed.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

You can also give negative values to the property as shown in the following example.

See the Pen CSS left property with negative percentage value by Aakhya Singh (@aakhya) on CodePen.

There are two other common but important points to be noted.

  • If you give both left and right values to a relatively positioned element, then it will shift only according to the left value.
  • If you give both left and right values to an absolutely positioned element, then its width will change to satisfy both the values if its width is not specified.

Browser Support

This property is supported in all major modern browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).