CSS定位

定位

CSS 布局的三种机制

网页布局的核心——就是用CSS来摆放盒子位置。
CSS提供了3种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中:
1.普通流（标准流)

2.浮动
让盒子从普通流中浮起来——让多个盒子(div)水平排列成一行。

3.定位
将盒子定在某一个位置自由的漂浮在其他盒子的上面——CSS离不开定位，特别是后面的js特效。

定位详解

1.边偏移
简单说，我们定位的盒子，是通过边偏移来移动位置的。
在CSS中，通过top、bottom、(left和right属性定义元素的边偏移:(方位名词)

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

2.定位模式(position)
在CSS中，通过position属性定义元素的定位模式，语法如下:

选择器{ position:属性值;}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。


静态定位(static)-了解

静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

相对定位(relative)-重要

相对定位是元素相对于它原来在标准流中的位置来说的。

相对定位的特点:(务必记住)
相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute)-重要

绝对定位是元素以带有定位的父级元素来移动位置(拼爹型)
1.完全脱标――完全不占位置;
2.父元素没有定位，则以浏览器为准定位(Document文档)。

父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点:(务必记住)
·绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。

子级是绝对定位，父级要用相对定位。

由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能响应后面元素的正常显示，我们使用相对定位

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们
想要的。

总结：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位(fixed)-重要

固定定位是绝对定位的一种特殊形式:(认死理型)如果说绝对定位是一个矩形那么固定定位就类似于正方形

1.完全脱标——完全不占位置;
2.只认浏览器的可视窗口——(浏览器可视窗口＋边偏移属性来设置元素的位置;
跟父元素没有任何关系;单独使用的
不随滚动条滚动。

定位(position)的扩展

绝对定位的盒子居中

注意:绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。

堆叠顺序(z-index)

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。
应用z-index层叠等级属性可以调整盒子的堆叠顺序。

z-index的特性如下:
1.属性值:正整数、负整数或0，默认值是0，数值越大，盒子越靠上;
2.如果属性值相同，则按照书写顺序，后来居上;
3.数字后面不能加单位。
注意:z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

可以用inline-block转换为行内块
可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的)
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
注意:
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

定位小结

注意:
1.边偏移需要和定位模式联合使用，单独使用无效;
2.top和bottom不要同时使用;
3.left和right不要同时使用。

9.网页布局总结

一个完整的网页，有标准流、浮动、定位一起完成布局的。每个都有自己的专门用法。
1).标佳流

可以让盒子上下排列或者左右排列的

2)浮动

可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列

3).定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。但是每个盒子需要测量数值。