12-css定位

一、相对定位：相对于自己原来的位置移动。

①、position: relative;  top: 30px . left: 30px;

②、移动之后原来的位置继续占有，后面的盒子不会移动。

③、相对定位经常用于给绝对定位当爹。

 

二、绝对定位：

①、position：absolute；

②、绝对定位移动后不占有原来位置。

③、绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

④、绝对定位元素不会影响其他任何盒子。

 

三、固定定位: position: fixed;

①、以浏览器可视窗口为参照点移动。

②、跟父元素没有任何关系。

③、不随滚动条移动而移动。

④、固定定位不再占有原先位置。

 

四、小技巧：如何让固定定位盒子固定在版心右侧

①、往右走浏览器一般距离。

　　left: 50%

②、再走版心宽度的一半距离。

　　margin-left: 宽度一半;

 

五、小技巧：让绝对定位的盒子在浏览器水平居中：

①、加了绝对定位的盒子不能通过 margin：auto；来水平居中。

②、小算法：left：50%； margin-left：盒子本身宽度一半；

 

六、定位特点：

①、绝对和固定定位和浮动类似，行内元素加了定位可以直接设置宽高。

②、块级元素添加定位，如果不给宽高，默认大小是内容大小。

③、浮动元素、绝对固定定位的元素都不会触发外边距塌陷问题。