css position

一、基础概念

参考w3school 定位概述
1.块级元素和行内元素
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

2.CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

二、position

参考CSS position详解
**提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
**

• static：这个值表示默认，让浏览器按照没有position属性去渲染块
• relative： 在static基础上进行偏移；如往左偏20像素，position:relative;left:-20px;；这里用英文“相对”，指的是相对自己的static位置；而且偏移后，static位置保留空白；偏移后可能与其他框重叠，重叠后的层次是渲染层次（后渲染的框在上面）。
• absolute：简单的说，absolute与relative的区别是，relative在原来的static位置留白，而absolute不留白。
  然后是一个比较复杂的问题，relative是相对于static位置的左上角进行偏移；可absolute的static位置已经被清理了， 它相对于哪里偏移？答案是相对于“离自己最近的非static祖先”的左上角。可能不好理解，直接上例子1，注意块三的位置，偏移原点是body的左上角，这是因为块三的祖先容器依次为：块二、body，而块二的position没有规定，默认为static，再向上就是body了（body再向上没有了）。
  
  image.png
  
  再看这个，和上一图区别是，我们给块二直接内嵌了一个position:absolute，显示结果完全不一样。首先解释块二，由static变成了absolute，但并没有给出偏移量，所以偏移为0，停留在原来的static位置。再看块四，由于块二是absolute，因此块二的原来的static位置被清空了，块四要代替块二，出现在块一的下方，这就是看上去块二和块四重叠了。至于块三，根据偏移原则，块三的祖先序列是块二、body，而块二就是非static的（注意，如果块二是relative也可以，区别是不会块二块四重叠现象，这里不再上图，请读者自行去验证），所以偏移是相对块二的左上角而言的。
  
  image.png

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

• fixed：跟absolute相似，没有滚动条的情况下没有差异。在有滚动条的情况下，fixed的块偏移原点始终是window的左上角。也就是说，即便滚动条发生变化，fixed的元素，也不会随着滚动条来回移动，而absolute则会随滚动条移动。可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化。一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单栏，又如弹出提示框居中显示。

第一个块
第二个块
第三个块
第四个块
第五个块

三、float

参考CSS float浮动的深入研究、详解及拓展(一)