Z-index lets you declare in what order elements should be "layered" if they are overlapping one another. The higher the z-index, the higher in order it will be. TranslateX and translateY will move the element relative to it's own width and height – not relative to the parent container as top, right, bottom and left do. TranslateX controls left to right and translate Y controls up and down.
Now that you know what properties can be set, the last thing to cover is the relational difference between relative, absolute and fixed. An element positioned relative will remain "in the flow" of the document – that is, neighboring element will still leave space for it. Using the iron-cross in "relative" positioning will nudge the element relative to it's place in the layout. Helpful for fintuning position when margin or padding won't do. Careful in using this that you don't unintentionally overlap neighboring elements!
Setting an element to position: absolute will position it "absolutely" to it's next relatively positioned parent container. That is – if you set position: absolute, top: 0, left: 0, it will go to the top left corner of it's container. Setting position absolute will also remove it from the document flow – as far as other elements are concerned, it's not there and it's space will not be preserved.
So, relative position is relative to itself and position absolute is relative to it's container – what's left? Position fixed! Fixed position will use the viewport as it's relative container. The viewport is the perimeter of your browser window. So, position: fixed, top: 0 will always skip all parent containers and go straight to the top (or bottom) of the viewport. Also, since it is positioned to the viewport, it will not scroll with your content. It will stay "fixed" position – get it yet? 😉