Parsing position positioning in CSS properties
Often encounter some elements overlap in the layout needs, this time on the need to consider the use of position positioning attribute, which require an element fixed in a certain way in a certain position, most of the time to deal with overlapping elements needs, and different ways of positioning the have different characteristics.
static (default value)
The default value corresponds to no targeting properties
relative
Relative positioning
element has opposing targeting method, reference will be positioning itself, by left, right, top, bottom offset value, positioning 0,0 respectively four corners of the element itself, this does not make the targeting methods elements from the document flow, and original spatial elements will be retained after migration.
absolute
Absolute positioning
1. This targeting element in its predetermined upper element have positioning properties as a positioning reference, if the parent element have targeting addition to the default value of static, places parent element as a reference, if the parent element is not positioned manner, the in order to find the upper positioning element as a reference until the html element.
2. absolutely positioned elements will flow completely out of the document, not a parent container distraction height, should be noted that, with the floating elements of different floating elements if the child elements, and parent elements are floating, then the child will be able distraction parent element, and absolute Once in force, it is completely out of the document flow.
3. This positioning element supports inline manner that the width and height is provided, also the width of the element according to the default content-specific.
fixed
Fixed positioning
element is fixed positioning of the entire browser window as a reference, and is not affected by any other elements, including a scroll bar, it will always be fixed in the browser window. Like the absolute positioning, flow completely out of the document, and the width and height of supporting element size, width, and according to the content set.
sticky
Adhesive positioned
1. It is like the relative binding to fixed, a new targeting methods, it is the same with the reference absolute, the parent is not the first positioning element to the default value as a reference and scope.
2. with this way of positioning elements, such as scroll bar when the event reaches an element in the set position, this element will be fixed in the browser window, similar to fixed, and does not reach the set position, which is similar to relative, nothing will change, needs to be noted that different fixed, viscous positioning will only act on the positioning of its parent element, the parent element when not in the window, and the sticky failure, and acting on the fixed window.
All positioning offsets left, right, top, bottom must be used in conjunction with positioning mode, otherwise invalid.
About z-index
When the positioning elements overlap when writing the code elements will be stacked on the uppermost layer of the display, and the z-index can be changed display hierarchy overlapping elements
without providing the z-index, all of the positioning elements to default level 0, z- The higher the index value display higher levels.
When the two positioning elements when comparing levels will be compared to begin sibling elements.
