position : absolute;
left : 10px || 10% || auto
默认值：auto
left right的百分数相对于包含块的宽度
top bottom 相对于包含块的高度
定位是相当于最近的非static祖先元素或者根元素
在left right都声明的情况下：
计算公式 left+margin-left+border+width+padding+margin-right+right=包含块width+padding
下面只深入解析left right都声明的情况
①定位元素没指定宽度，指定了left和right，没指定margin
元素在包含块水平居中,width被拉伸
②定位元素没指定宽度，指定了left和right，指定了margin
如果左右margin都为auto，和第一种情况是一样的，如果有一个为auto,另一个为某个值，为auto的会为0，width拉长。
③定位元素指定了宽度，指定了left和right，没指定margin
right会失效，重新计算
④定位元素指定了宽度，指定了left和right，指定了margin
如果margin都为auto,两margin会拉伸并相等，让等式满足。
如果只有一个为auto,为auto的会自动拉升(必须显示声明)
如果只有一个margin显示声明为定值，另一个没声明，right会重新计算。
如果只有一个为auto,另一个没声明，margin会拉伸以满足等式。
综上 ，声明了width的，width永不会变，没声明width,width会尽量变现得长一点。
垂直方向和水平规则是一样的。
过度受限时，会重新计算bottom.
left right top 为auto时是与其假设为静态时的位置对齐的。 bottom不行
网友评论