浅谈CSS中的定位

说在最前面

一切皆为框。div、h1或p元素被称为块级元素，这些元素显示为一块内容，即为“块框”。span和strong等元素称为行内元素，他们的内容显示在同一行中，即为“行内框”。

在没设置任何style的情况下，这些框，按照正常的顺序在文档流中排列：即块框独占一行，行内框显示在同一行。

注意：width属性、垂直内边距、外边距都无法作用于行内框；行内框宽度发生溢出会自动换行

CSS定位机制

CSS有三种基本的定位机制：普通流、浮动和绝对定位。可以通过display属性设置定位类型：

一、相对定位

相对定位：相对于元素在普通流中的位置。通过设置元素的垂直或者水平位置，让元素相对于它的起点进行移动。

#box_relative{ position: relative; left: 30px; right: 20px; }

注意：相对定位，无论是否移动，元素任然占据原来的空间，移动的元素会覆盖其他框。

二、绝对定位

绝对定位：元素脱离文档流，不占据空间，位置相对于最近的已定位祖先。

#box_absolute { position: absolute; left: 30px; right: 20px }

注意：绝对定位元素位置对于正常文档流中其他元素相当于不存在，可用z-index属性设置元素堆放次序。

三、浮动

1、浮动的框向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。

2、浮动框脱离普通文档流，普通文档流中的框不知道浮动框的存在。

CSS中的display属性

display属性可以用来设置元素生成的显示框的类型。

CSS中的position属性

可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/position这篇文章，讲的很详细。