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）绝对定位与浮动的区别
  对文字和其他行内元素的处理方式不同
  绝对定位与浮动的区别