0

What is the meaning of "auto" value of a "left" CSS property? What happens when value of a "left" property is set to auto?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Manny
  • 134
  • 2
  • 15
  • Inspired from post - https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property . However, it did mention that behavior of "auto" depends upon the property it is assigned to. – Manny Sep 03 '19 at 04:04

2 Answers2

3

Here you go CSS: Left

Excerpt from the official Docs.

Specifies that:

for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element.

for relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88
2

From the left documentation:

auto specifies that:

  • for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
  • for relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all.
Community
  • 1
  • 1
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • https://codesandbox.io/s/react-jss-playground-mr4p6 - react fiddle if you wish to play around – Manny Sep 03 '19 at 04:09
  • what happens if the right property is not mentioned? left: auto and position: relative – Manny Sep 03 '19 at 05:50
  • @MansiManhas *what happens if the right property is not mentioned?* --> it means that right is also auto. You should note that auto is the default value – Temani Afif Sep 03 '19 at 08:07
  • also found out that left + position: relative will give it a NUDGE. reference - https://css-tricks.com/almanac/properties/l/left/ – Manny Sep 09 '19 at 08:20