CSS - Left Property

1 - About

The left property is the offset from the left edge of the css box.

It works only if the box is:

3 - Example

3.1 - Relative

In a relative box, the left offset is calculated from the left edge of the container as coordinate.

In the example, we are using the following notion:
  • As example, we will have:
    • a div element that we will offset
    • and the p children elements to offset by 10px from their container (the div)

<div>
	<p>At 10px from the div container</p>
	<p>At 20px from the div container</p>
	<p>At 30px from the div container</p>
	<p>At 40px from the div container</p>
	<p>At 50px from the div container</p>
	<p>Left 60px does not in a static box</p>
</div>

  • The div container with an offset of 100px and a border

div:nth-child(1) {
   padding:10px;
   position:relative;
   width: fit-container;
   left:100px;
   border:1px solid blue;
}

  • An increasing offset by p element

p:nth-child(1) {
   left: 10px;
   position:relative;
} 
p:nth-child(2) {
   left: 20px;
   position:relative;
} 
p:nth-child(3) {
   left: 30px;
   position:relative;
} 
p:nth-child(4) {
   left: 40px;
   position:relative;
} 
p:nth-child(5) {
   left: 50px;
   position:relative;
} 
p:nth-child(6) { 
   left: 60px; /* Left will not work on a static box */
/*   position:static; default */
} 

  • Result:

3.2 - Absolute

The offset is from the viewport edge

4 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap