定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 平铺

定位可以让盒子自由的在某个盒子内移动或者固定屏幕中某个位子，并且可以压住其他盒子。 叠积

定位：定位模式（position属性）+偏移量

position属性：static、relative、absolute、fixed

top、bottom、left、right四个属性：专门移动定位的盒子，top:80px 定义元素相对于其父元素上边线的距离 控制大致位置的

margin-：利用外边距属性，微调位置的

 

1.静态定位无边偏移，同标准流的效果。

2.相对定位：相对与原来自身移动，top：100px，距离原来的坐标顶部100px。原来位置仍保留。

3.绝对定位：相对于祖先元素，无父 或父元素没有定位，以浏览器定位；

父或祖先有定位（除静态定位的定位），以最近的有定位的为基准。不保留原来的位置，可随意移动，不影响下面的标准流。

子绝（不占位置）父相（占位置）。

一部分有多个img，最好别直接控制图片，给他套个父盒子，或为了区分加了em标签，放其内。

 

4.固定定位：以浏览器可视窗口为参考展示效果。不占有原先位置，脱离标准流。

小技巧：固定在版心右侧位置

position：fixed

left:50%  走可视窗的一半

margin-left:版心宽度的一半     设置盒子左边距，使之与中心线隔开版心的一半

 

粘性定位： 以浏览器可视窗口为参考展示效果。占有原先位置。兼容性差，IE不支持。效果类似Excel中冻结某行

position:sticky; 

top:10px

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）2.占有原先的位置（相对定位特点）3.必须添加边偏移：top left right bottom才有效

 

定位叠放 ：决定盒子上下的叠放效果 z：z轴

z-index ：1；

可以是正整数、负数、0 默认auto 数值越大越靠上  ！千万不能加单位 ！标准流和浮动无，只有定位的盒子才有此属性

 

小技巧：盒子居中：轮播图页码的那种盒子，需要居中显示的，可视区变化，对于可视区仍居中

position：absolute；

left：50%；离父容器左边要有50%的间隔

margin-left：-100px；负左边距是自己盒子的一半

top:50%；

margin-top:-100px；

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可通过计算方法实现水平和垂直居中。

 

定位特殊属性：绝对定位和固定定位和浮动类似。

行内元素添加绝对定位或固定定位，可直接设置高度和宽度。

块级元素添加绝对定位或固定定位，如果不给宽度或高度，默认大小是内容的大小。

脱标的盒子（浮动、绝对定位、固定定位）不会触发外边距塌陷。

浮动不会压住标准流盒子的文字、图片

，但绝对定位（固定定位）会压住所有内容。