Front-end basis - Positioning

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.

3. fixed positioning

 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:

 

Guess you like

Origin www.cnblogs.com/songsongblue/p/11368010.html