CSS手动布局

CSS支持单独设置某个元素的布局，最主要的属性是 position ，它有以下几个值：

• static静态位置（默认值）。元素采用正常流布局，此时元素的位置偏移属性（ top 、 right 、 bottom 、 left 和 z-index ）无效。
• relative相对位置。首先按照正常流布局排列元素，然后根据位置偏移属性移动元素，其他元素的位置不变。移动后元素可能覆盖其他内容，原来的位置填充空白。
• absolute绝对位置。元素从正常文档流中移除。根据距离元素最近的非静态位置上级元素，和元素自身的位置偏移属性计算位置。绝对定位元素不会合并外边距。
• fixed视口固定位置。元素从正常文档流中移除。根据屏幕视口位置和位置偏移属性决定元素位置。在屏幕滚动时，元素的位置也不会改变。视口（viewport）是当前可见的网页区域。
• sticky粘性位置。粘性位置可以看做相对位置和视口固定位置的结合。一开始元素使用相对定位。在屏幕滚动时，如果达到阈值，元素变为视口固定定位。反之，如果屏幕反向滚动偏离阈值，元素再次变为相对定位。粘性位置通常用于吸顶效果。使用粘性位置时有两点需要注意：必须至少设置 top 、 right 、 bottom 或 left 属性之一；上级元素必须可以滚动 overflow: auto | scroll | hidden; 。

除 position 外，属性 float 也可以改变元素的位置。 float 让元素浮动到上级元素盒子的左侧或右侧。浮动元素会被移出文档流，然后向左（右）平移，直到触碰盒子边界，或另一个浮动元素。其他内容环绕浮动元素排列，填充浮动元素右（左）侧和下方的空间。

代码1  手动布局属性

position: static;   /* 正常流布局。 */
position: relative; /* 相对（正常布局）位置。 */
position: absolute; /* 绝对位置。 */
position: fixed;    /* 视口固定位置。 */
position: sticky;   /* 粘性位置。 */
top: 10px;
right: 20px;
bottom: 10px;
left: 10px;
float: left;