Cool Trick! Using Your Keyboard Arrow Keys to Position Items via CSS in Firebug or Chrome
Channel: Creator's Media Tools
Date: 2012-03-03

See accompanying article here: https://terrybritton.com/positioning-content-precisely-using-css/ You can use the arrow keys in your browser via Firefox's Firebug or Chrome's "Inspect Element" tool to precisely position an element on your page while watching it move right in the browser! Then you can take the settings you've derived and copy and paste them into your CSS for the actual page!!! Pixel-perfect precision is yours at last!

This video also shows how to use the Z-index to layer items underneath or on top of other ones, and covers using the Opacity setting to set transparency as well.

Additionally, once you have set position:relative; you can use top:value; and left:value; to do similarly to what the top and left margins do. Then use the Z-index to place things on top of other things.