1. Absolute positioning
If all parent elements are not explicitly defined position attribute, then the default position of all of the parent element attributes are static case. As a result, absolute positioning element is contained in the original block container in. The initial block and the container has a browser viewport same size, and the <html> is also included in this element inside the container. Briefly, absolute positioning element will be placed outside the <html> element and positioned in accordance with the browser viewport. It can also be understood to be positioned with respect to the element now <body>
elements.
2.z-index
z-index
Value affects the positioning element located on the shaft; value to move them up the stack, they are moved down to a negative value in the stack. By default, the positioning elements have the z-index is auto, essentially zero.
Please note, z-index only accept non-unit index value; you can not specify that you want a Z-axis element is 23 pixels - it does not work this way. Higher values will be higher than the lower value, depending on the value you use. 2 and 3 using 300 will produce the same effect as 40,000.
Another type of cover positioning --fixed. This works exactly the same absolute positioning, there is only one major difference: absolutely positioned elements are fixed relative to the <html>
element or locate the nearest ancestor, while fixed positioning element is fixed relative to the browser viewport itself. This means you can create a fixed useful UI projects, such as persistent navigation menu.
References: