CSS布局的三种机制

普通流（标准流）

浮动

让盒子从普通流中浮起来—让多个盒子(div)水平排列成一行

定位

让盒子自由的定在其他盒子上面—CSS（js 特效）离不开定位

定位模式

语法

选择器 { position: 属性值; }

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，它没有边偏移

相对定位(relative)

相对定位是元素相对于它原来在标准流中的位置来说的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置
如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的

居中
1.left:50%;：让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px;：让盒子向左移动自身宽度的一半

固定定位(fixed)

固定定位是绝对定位的一种特殊形式
完全脱标——完全不占位置，单独使用的不随滚动条滚动
只认浏览器的可视窗口，跟父元素没有任何关系

边偏移

top
顶端偏移量，定义元素相对于其父元素上边线的距离

定位案例

新浪首页案例分析

顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动
两侧图片固定在浏览器可视窗口左右两侧，不随窗口一起滚动

顶部和底部

.top {
/* 注意：使用固定定位时，如果盒子中没有内容，需要     指定宽度 */
width: 100%;
height: 44px;
background: url(images/top.png) no-repeat top center;
position: fixed;
left: 0px;
top: 0px;
}
.box {
width: 1002px;
/* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
margin: 44px auto;
}

在使用固定定位时，如果盒子中没有内容，需要指定宽度

左右两侧

.ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}

注意
不要同时使用 left 和 right 和边偏移属性

CSS基础知识（定位）

CSS基础知识