CSS定位

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

定位的组成

定位：将一个盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

• 定位模式

定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：

• 边偏移
  定位的盒子移动到最终位置，有四个属性，注意：只用定位能使用这四个属性
  

定位方式

静态定位static（了解）

元素默认的定位方式，是无定位的意思，语法：

选择器{position:static;}

静态定位按照标准流特性摆放位置，没有边偏移。很少用。

相对定位relaticve

元素在移动位置的时候，是相对于 他原来的位置 来说的。语法：

选择器{position:relaticve;}

特点：
（1）他是相对于自己原来的位置来移动的
（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置，别人不能使用）

绝对定位absolute

元素在移动位置的时候，相对于它祖先元素来说的。语法：

选择器{position:absolute;}

特点：
（1）如果没有祖先元素或祖先元素没有定位，则以浏览器为准进行定位
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
（3）绝对定位不再占有原来的位置（脱标）

子绝父相

意思：如果子级使用绝对定位，父级则需要使用相对定位
父亲必须要占有位置，不能影响后面的标准流，所以用相对定位，而子盒子不需要保留位置，可以随意摆放，所以用绝对定位。

固定定位fixed

元素固定于浏览器可视区的位置，使用场景：浏览器页面滚动时元素的位置不会改变。语法：

选择器{position:fixed;}

特点：
（1）以浏览器的可视窗口为参照点移动元素：跟父元素没有任何关系，不随滚动条滚动
（2）固定定位不再占有原来的位置，可以看做一种特殊的绝对定位。

• 固定定位小技巧：固定在版心右侧位置，如返回顶部按钮。
  计算：
  1、让固定定位的盒子left：50，走到浏览器可视区的一半
  2、让固定定位的盒子margin-left：版心距离的一半

粘性定位sticky（了解）

相对定位和固定定位的混合。

选择器{position:sticky;top:10px;}

特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）占有原先的文职（相对定位特点）
（3）必须添加top、left、bottom、right中的一个属性才会有效果。

总结

定位次序

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）

选择器{z-index:1;}   无单位，只有定位的盒子才有这个属性

数值可以是正整数、负整数或0，默认auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上

定位的拓展

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

 left:50%;  父容器宽度的一半
 margin-left:-(盒子宽度的一半);

垂直居中：

top:50%;  父容器宽度的一半
margin-top:-(盒子宽度的一半);

• 定位的特殊特性
  绝对定位和固定定位也和浮动类似。
  （1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  （2）块级元素添加绝对或者固定定位，如果不给宽度或高度，默认大小是内容的大小

• 脱标的盒子不会除法外边距塌陷
  浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

• 绝对定位（固定定位）会完全压住盒子
  浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），如图，浮动的粉色盒子压住了p标签，但是里面的文字是不会被压住的。因为浮动产生最初的目的是为了实现文字环绕的效果，让文字围绕图片显示。
  
  但是绝对定位（固定定位）会完全压住下面标准流的所有内容
  

元素的显示与隐藏

类似有些网页广告，当点击了关闭后，重新刷新页面后广告又会出现。本质：让一个元素在页面中隐藏或者显示出来。

display属性（*）

用于设置一个元素应该如何显示。
（1）display：none；隐藏对象
（2）display：block；除了转换为块级元素之外，同时还有显示元素的意思。display隐藏元素后（不是删除），就不再占有原来的位置。

visibility属性

用于指定一个元素到底是隐藏还是显示；
（1）visibility：visible；元素可见
（2）visibility：hidden；元素隐藏
隐藏元素后，继续占有原来的位置。

overflow溢出

当内容超过了盒子的范围。
（1）overflow：visible；不剪切内容也不添加滚动条
（2）overflow：hidden；溢出的部分隐藏，注意如果有定位的盒子，慎用！
（3）overflow：scroll；溢出的部分显示滚动条，不溢出也会显示滚动条
（4）overflow：auto；在需要的时候添加滚动条