CSS定位
定位
定位概况
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
定位属性
- position 规定元素的定位类型
position 属性4 种不同类型的定位
1） static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2）relative
相对其之前的位置进行定位（偏移）；元素保持原有的形状，它原本所占的空间仍保留。
3）absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
4）fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置进行定位。
- top/bottom/left/right
用于定义元素框的偏移位置 - z-index
设置元素的堆叠顺序
四种定位类型
-
1）普通流定位position:static
普通流中元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。 -
2）相对定位position：relative
设置为相对定位的元素框会偏移某个距离。（相对之前位置的偏移）
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 -
3）绝对定位position：absolute
设置为绝对定位的元素框从文档流完全删除，因此不占据空间。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
相对定位是“相对于”元素在文档中的初始位置定位，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块进行定位。 -
4）固定定位position:fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
将元素的内容固定在页面中的某个位置，元素从普通文档流中完全移除，不占用页面空间，当用户向下滑动页面元素框时并不随着移动。 -
堆叠顺序
一旦修改了元素的定位方式，则元素可能会发生堆叠，可以使用z-index属性（层级）来控制元素框出现重叠的顺序
值越大表示堆叠越高，离用户越近
可以设置负值，表示离用户更远
浮动
- 1）元素浮动的目的
最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。 - 2）浮动的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
浮动元素的影响 - 3）浮动元素的特点
浮动定位是将元素排除在普通文档流之外，元素将不占用空间；
浮动的框可以向左或向右移动，直到它的外边碰到包含框或者另一个浮动框为止；
浮动元素的外边缘不会超出其父元素的内边缘，浮动的元素不会互相重叠，浮动元素也不会上下浮动。 - 4）清除浮动
8种CSS清除浮动的方法优缺点分析 - 5）绝对定位与浮动的区别
对文字和其他行内元素的处理方式不同
绝对定位与浮动的区别
