left

Definition

The left css property sets the distance of an element from the left side of its container.

In order for elements to be positioned with left, they need the following css positions to be set.

position: relative;
position: absolute;
position: sticky;
position: fixed;

The only excluded position is position: static, where left effectively does nothing.

The relation between left and its position is different for each combination. let’s explore some examples.

In this example below, the .box element will be nudged 10px to the left. Because we have a relative position, the element takes up space within the flow of content.

.box {
  position: relative;
  left: 10px;
}

In this example below, the .box element will be positioned 10px to the left. The different here is that this element will be 10px relative to its parent.

.box {
  position: absolute;
  left: 10px;
}

In this example below, the .box element will be stuck with a 10px gutter from its relative parent.

.box {
  position: sticky;
  left: 10px;
}

In this example below, the .box element will be fixed 10px from the left of the visible viewport.

.box {
  position: fixed;
  left: 10px;
}