First, what is positioning
Change the position of elements on the page
Second, the positioning of classification
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位Third, the positioning of the normal stream
The default positioning of elements in the page mode, the default document flow, from top to bottom, left to right
1, each element has its own space in the page
2, each element is displayed from the top left corner of the parent element
3, block elements are arranged in a progressive manner from top to bottom, a separate line for each element
4, the line element is a plurality of display elements in a row, are arranged one by one from left to right
Fourth, float position
1, when the float element is provided, the default document element from the flow, before the element at the back of the fill bits. The current element will be in the current line, or left to right
float：left、right、none
Features:
(1), once the floating elements, it is out of the document flow, and does not occupy space on the page, fill the seats at the front and rear
(2), the float would lie on the left of the parent element / right side, or other floating elements have edge
(3), is to solve the problem of floating elements in a row a plurality of block-level display
2, a special case of the floating initiator
a, (1) when less than all parent elements are displayed when the floating element, will not fit wrap several displays, wrap display rules: preferentially floating followed Left / Right
（2）浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他后面浮动元素占用B, once the floating elements, if not defined width, the width will be the norm
C, once floated element, becomes a block-level element, width and height may be provided, upper and lower margins may be provided
d, text, inline elements, row elements within the block floating elements will not be pressed downward. But cleverly avoided all floating elements floating around those elements are displayed
e, clear float: floating element once it will bring some influence subsequent elements (subsequent elements to fill the seats at the front), if subsequent elements do not want to fill the seats forward, then subsequent elements to set clear, clear in front of the float brings influences
clear：left/right/both
F, collapsed height, if the height of the block elements is not provided, the height of the internal elements of the norm, but if the internal elements are floating elements, the floating element does not occupy space on the page, no higher parent element
解决方案：
1、直接为父元素设置高度，弊端：不知到父元素高度
2、父元素也浮动，弊端：浮动会影响后续元素
3、overflow：hidden，弊端：当元素真的需要显示溢出内容时，就显示不出来了
4、在父元素中追加一个空的块级元素，并设置clear：both3, display
1, display
display
In the form of a display element of the page (block-level, the row lines within the block)
Value:
(1) none: to hide, do not show elements, does not occupy the position
(2) block: Let the same elements and forms block-level elements, features: a separate line, width and height may be provided, the vertical margins
(3) inline: Let the elements and inline elements as features: a plurality of elements common line, and the width and height can not be set vertical margins
(4) inline-block: Let manifestations and block elements within the same row, features: a plurality of display elements in a row, but can be set high and wide vertical margins
(5) table: make table expressions and elements of the same characteristics: size to the norm, each element on a separate line, allows you to modify the size of
2, display
visibility
The value
visible：默认可见
hidden：隐藏display: the difference hidden:: none and visibility display hidden from the document flow, the page does not occupy space, visibility without departing from the document flow, the space occupied by the page
3, transparency
opacity
Value: 0 to 1 smaller more transparent
The difference between opacity and rgba: opacity act on the elements, to the extent relevant elements with transparent colors will follow, can be applied to sub-elements, rgba only change the transparency of the current element, it does not affect other elements
4, the vertical alignment
vertical-align
Value: top / middle / bottom
Use:
（1）table标签中，控制文字的垂直对齐，取值：top/middle/bottom
（2）img标签，控制图片与前后文字的垂直对齐方式,取值：top/middle/bottom/baseline5, the cursor
cursor：
Value:
（1）default：箭头
（2）pointer：手
（3）text：I
（4）crosshair：十字
（5）wait：沙漏或者转圈
（6）help：问号Fifth, positioning
1, the positioning properties
position：
Value:
（1）static： 默认值，静态，默认文档流
（2）relative：相对定位
（3）absolute:绝对定位
（4）fixed：固定定位
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）element is set to position relative / absolute / fixed to any value, the element is referred to as a targeted element
Offset property
top/bottom/right/left
left: 100px to 100px by the shift
2, the relative positioning of
Element relative to the original position offset a distance, without departing from the default document flow, position on the page will not be other elements to fill the seats
Syntax: position: relative; to be used with offset properties
Use: As ancestor absolutely positioned elements
（1）位置微调3, absolute positioning
Absolutely positioned elements will flow out of the default document, after the element will fill the seats forward, absolutely positioned elements will be relative from his ancestor has recently positioned to achieve localization, if not all ancestor elements have been positioned, relative to the body to achieve localization
Properties: position: absolute; offset property with the use of
When there is a cascading effect: occasions
4, fixed positioning
The element is fixed in a certain position on the page, the elements do not change over the position of the scroll bar, but has been fixed in the area
grammar:
position: fixes; offset property with the use of
note:
（1）固定定位脱离文档流，不占页面空间
（2）固定定位元素变为块级元素
（3）相对于body实现位置的偏移Stacking order
Has become an element positioned elements, there may be stacked, I want to change the stacking order
z-index
Values: unit number, the larger the number, the more elements on the display, invalid z-index of elements between father and son, the child will always be an element in the parent element above the positioning element has only to use the z-index