The simplest way I can explain it is that margin-left moves the element itself, whereas left (with position: relative) pushes other elements away. Although that's not, perhaps the clearest description.
With pictures, though:
+---------------------------------------------------------------------------+--------------+
| |
| +------------------------------------------------------------+ |
| | | |
| | +------------------------------+ | |
| | | | | |
position | | | | | |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
| | | | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------------------------------+ |
+------------------------------------------------------------------------------------------+
With position: absolute left also serves to define the distance between the element itself and the left boundary of whatever object the element is positioned against.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
