.style.left is a text-format property. You can use it to set the position of an object's left-hand edge in either pixels or a percentage of the width of the browser window (or other container).
Click the first two buttons to see the difference between percentage and pixel placement. Try resizing your browser after each one and see the effect. The image doesn't move horizontally when it's in a pixel-specific position, but when it's percentage-placed it moves horizontally to maintain its percentage position within the changing browser width. Also check out the results panel (to the right of the picture), which shows the values of all three properties after each button-press.
As the third button shows, if you assign a numeric value to .style.left, it's always interpreted as a pixel coordinate. You can't, however, do arithmetic on .style.left, e.g. 'Mypic.style.left += 50'.
That's where .style.posLeft comes in. This is a numeric property, so you can do arithmetic on it, e.g. 'MyPic.style.posLeft += 50'. However, which units it represents (pixels or percentages) depends on what you last set style.left to, so you've got to be careful.
To see this in action, first click the '.left = "50%"' button then click the two buttons ".posLeft = 60" and ".posLeft += 30". Now click the '.left = "50px"' button and try the .posLeft buttons again. The .posLeft buttons executed the same JavaScript code both times, but the values they placed into MyPic.style.posleft were interpreted first as percentages, then as pixels, because the left-hand buttons had changed the units represented by .style.left.
If all that seems a bit complicated (because it is!), then remember that the .style.pixelLeft property is numeric (so you can do arithmetic on it) and always represents pixels, whatever you've done with .style.left. To show this, first press the '.left = "50%"' button and check the results panel. Now press the ".pixelLeft += 100" button and check the results panel again. The image has moved 100 pixels to the right, but the .left and .posLeft properties remain in percentage mode, incremented by whatever percentage of your browser width 100 pixels represents.
Finally, two points to remember:
1. There are corresponding .style.top, .style.posTop and .style.pixelTop for controlling the vertical position of an object's top edge.
2. Only .style.left and .style.top have corresponding inline style sheet attributes, so the only way to give an object an initial postion is by STYLE="top:50;left:100;" etc.