set the object's position targeting, location allows easy layout layer absolute positioning, control box objects more accurately
The value of the position and role:
All the value of position: static (default), relative, absolute, fixed, inherit, (initial、unset、sticky）
1.static: always in a position to give the document flow, you can quickly cancel positioning, so that top, right, bottom, left value failure
2.relative: absolute positioning, relative positioning with respect to its origin position in the default offset of the normal stream, the space previously occupied by any one of its natural retained
3.absolute: out of the normal flow of the document, does not occupy space position, not the parent class distraction. The property value of its parent to pay attention to, and overflow: hidden not chaotic setting, because they do not belong to the normal document flow, not to occupy the height of the parent class, there would be no scroll bars
4.fixed: older versions of IE do not support, positioning relative to the origin of the browser window, and can not be changed. Commonly used in the header, footer, or some fixed suspending div, with the scroll bar to scroll and smooth and stable, better than JS
5.inherit: specified value of the position property inherited from the parent class. But any version of IE do not support the property value
6. (① initial keyword is used to set the CSS property to its default value, it can be applied to any CSS styles; ② unset keyword we can simply be understood as not setting Actually, it is the keyword. initial And inherit combinations, if a property is the default inherited properties, this value is identical , when the screen elements, expressed as relative, necessary to get out of the display screen when the performance of fixed)inherit，否则等同于initial；③sticky元素效果完全受制于父级元素们，它是关键字relative和position:fixed的结合体
display elements of attribute type box should generate rules. Is any element within the document block, block row or the inner frame box
display the value and role:
display property values: none, inline, inline-block, block, flex, inherit
1.none: hidden to hide the div, the document does not occupy space
2.visiability: hidden to hide the div, occupying document control
3.display: inline and block, the block-level element and the called element rows. Block difference is manifested on a separate line, the browser generally vertical layout margin can be used to control the spacing between the block elements; inline and laid out horizontally, vertically margin and padding are invalid, with the size of Like content, and you can not set the width and height. inline like plastic bags, how content, you quite pretty; block is like a box, with a fixed width and height.
4.inline-block it in between
5.flex: flexible pouch layout model, the layout Flex set after the sub-elements float, clear, and vertical-align property will fail