学习CSS定位

我们可以使用display属性改变元素的类型，设置dispaly为block使得行内表现的像块级元素一样，设置display为inline使得块级元素表象的和行内元素一样；还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

Position属性规定元素的定位类型;

几种定位：

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

2、浮动定位：浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间(即不保留原占位)，clear 属性规定元素的哪一侧不允许其他浮动元素。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。。

3、相对定位： 即相对于元素在文档流中位置进行偏移。 但保留原占位，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框；

4、绝对定位：即完全脱离文档流， 相对于position属性非static值(即已经定位)的最近父级元素进行偏移，可以覆盖页面上的其他元素；

5、固定定位：它可以让HTML元素脱离文档流固定在浏览器的某个位置。

6、Z-index:控制元素的摆放顺序，如果设置其值为-1，可被用于将在一个元素放置于另一元素之后；

小结：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。