CSS定位

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

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

1、定位组成

定位=定额模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。

定位模式

边偏移

边偏移就是定位的盒子移动到最终位置，有top bottom  left  right 四个属性。

静态定位

静态定位是元素的默认定位方式，无定位的意思。按照标准流特性摆放位置，没有边偏移。

语法 ：  选择器  { position： static；}

相对定位 relative

相对定位是元素在移动位置时是相对于它原来的位置来说的；原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。（不脱标，继续保留原来位置） 最典型应用给绝对定位当爹

语法： 选择器  { position： relative；}

绝对定位 absolute

绝对定位是元素在移动位置的时候是相对于他祖先元素来说的

语法： 选择器 { position： absolute；}

特点：

1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2、如果祖先元素有定位（相对 绝对 固定定位），则是以最近一级的有定位祖先元素为参考点移动位置。

3、绝对定位不再占有原先的位置

子绝父相

子级绝对定位不会占有位置可以放到父盒子里任何地方，不影响其他盒子；

父盒子需加定位限制子盒子在父盒子内显示；

父盒子布局时需占有位置，只能是相对定位

固定定位 fixed

固定定位是元素固定于浏览器可视区的位置，

1、以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。

2、固定定位不再占有原先的位置。，固定定位也是脱标的，是一种特殊的绝对定位

语法： 选择器 {position： fixed；}

固定在版心右侧位置

1、让固定定位的盒子left：50%。走到浏览器可视区的一半位置

2、让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置

粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合，以浏览器的可视窗口为参照点移动元素（固定定位特点），粘性定位占有原先位置（相对定位特点），必须添加top、left、right、bottom、其中一个才有效。跟页面滚动搭配，IE不支持

选择器 {position：sticky；top：10px；}

定位总结

2、定位叠放次序  z-index

语法： 选择器 { z-index：1；}

数值可以是正整数、负整数或0，默认是auto，数值越大盒子越靠上

如果属性相同，则按照书写顺序后来居上。

数字后面不能加单位

只有定位的盒子才有z-index属性

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto 水平居中，可以通过以下方法

1、left：50%； （让盒子的左侧移动到父级元素的水平中心位置）

2、margin-left： -100px；（让盒子向左移动到自身宽度一半）

定位特殊特性

绝对定位和固定定位也和浮动类似

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

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

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

浮动元素不同，只会压住他下面标准流的盒子但不会压住下面标准流盒子里面的文字。但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动最初就是为了使文字环绕

如果一个盒子既有left属性又有right属性则会默认执行left属性

白色半透明 background: rgba(255,255,255,.3)

3、网页布局总结

4、元素的显示与隐藏

1、display显示隐藏

2、visibility显示隐藏

3、overflow溢出显示隐藏