CSS - Left property explained as 1, 2, 3

CSS - Left Property

About

The left property is the offset from the left edge of the containing_block.

It applies only if the box itself has a position value of:

  • relative
  • absolute
  • or fixed

The static position will not work. Ie the left position does not work in a normal flow positioning model

Containing Block

The containing block depends on the positioning model.

If the box position property is With the following ascendant rule The positioning model is Then the containing block is
relative The parent container has a static or relative position relative positioning the box itself after being laid out by the normal flow
absolute An ascendant container has a relative position absolute positioning the first ascendant relative box
or the viewport (ie screen) if none
fixed None fixed positioning an anchored viewport (ie screen)

Example

Relative Positioning - Block

In a relative positioning (where the box has a relative position), the left property defines an offset of the box itself after it has been been laid out via the normal flow algorithm.

In other word, the containing box is the box itself after been laid out by the normal flow

In the example, we are using the following notion:

In this example, we have p elements that we will offset by a factor of 10px depending on their position in the list. The offset will apply after been laid out with the normal flow.

<p class="relative_box">Position 1: At 10px from the layout of the normal flow (ie the body container)</p>
<p class="relative_box">Position 2: At 20px from the layout of the normal flow (ie a new line from the previous p element)</p>
<p class="relative_box">Position 3: At 30px from the layout of the normal flow (ie a new line from the previous p element)</p>
<p class="relative_box">Position 4: At 40px from the layout of the normal flow (ie a new line from the previous p element)</p>
<p class="relative_box">Position 5: At 50px from the layout of the normal flow (ie a new line from the previous p element)</p>
<p class="static_box">Position 6: Left 60px does not apply in a static box</p>
  • The rule for the class static box and relative box
/* the rule that set the box static and paint them with a red border */
.static_box {
   /* position: static - this is the default value, not need*/ 
   padding:10px; /* padding to have the text not touching the border */
   border:1px solid red; /* to see the border */
}
/* the rule that set the box relative and paint them with a blue border */
.relative_box {
   position: relative; /* The box positioning is relative to itself after its normal flow positioning */ 
   padding:10px; /* padding to have the text not touching the border */
   border:1px solid blue; /* to see the border */
}
body > p:nth-child(1) {  left: 10px;  }  /* For the first p */
body > p:nth-child(2) {  left: 20px;  }  /* For the second p */
body > p:nth-child(3) {  left: 30px;  }  /* For the third p */
body > p:nth-child(4) {  left: 40px;  }  /* For the fourth p */
body > p:nth-child(5) {  left: 50px;  }  /* For the fifth p */
body > p:nth-child(6) {  left: 50px;  }  /* For the sixth p where Left will not work because this is a static box */
  • Result:

Relative Positioning - Inline

offset properties can also be used in a inline context to move words (generally in the top or bottom direction.

This example does not use the left property but the the bottom for the demo.

  • The HTML with:
    • a paragraph to set a minimum line height
    • and a span to set the bottom CSS property to word
<p> Relative positioning can also be used inline to offset the position of an element in a paragraph for instance such as creating an <span class="exponent">exponent</span> for a formula.</p>
  • The css with the bottom property
.exponent {
   position: relative;
   bottom: 0.5rem; /* bottom and not left because it does not make any sense in a inline scheme */
   border:1px dashed blue; /* to see the border */
}
  • The css with the line-height property for each paragraph
p {
   border:1px dashed red; /* to see the border */
   line-height:2rem; /* set the vertical space between rendered lines */
   padding: 0.5rem /* text will not touch the border */
}
  • Result

Absolute Positioning

In a absolute model, the containing box is the first ascendant box with a relative,absolute or fixed position.

If there is no relative ascendant box, the containing box is the viewport

  • The HTML with a paragraph to act as the absolute box with a left property.
<p class="absolute_left">This paragraph is absolute left positioned against its containing box (which is the body) and move it then to the right by 25%</p>
  • The css with the bottom property
.absolute_left {
   position: absolute;
   left: 25%; /* 25% of the containing box (ie 1/4 of the viewport) */
   border:1px dashed red; /* to see the border */
   max-width:300px; /* width does not follow the content */
   margin:0; /* some browser add a top/bottom marge to a absolute box*/
}
  • The body needs also an height because an an absolute box does not participate in the height of the body and we would get a body with a height of 0px.
body {
  height:7rem; /* An absolute box does not participate in the height of the body, we need to give a little bit otherwise we see nothing */
  border:1px dashed blue; /* to see the border */
}
  • Result

Documentation / Reference





Discover More
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS Position - Relative Positioning (Static > Relative)

relative is a positioning scheme that positions a box: according to the normal flow, then translate the box position with the offset properties (ie top, left, right, bottom) . The offset properties...



Share this page:
Follow us:
Task Runner