css定位布局

css定位布局

​ 1）relative：相对定位
​ 占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。 它相当于自身所占的位置偏移。
​ 2）absolute：绝对定位
​ 脱离文档流，相对于body做偏移
​ 绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。在项目开发中，一般使用relative+absol结合使用。
2、z-index

​ 当多个元素添加绝对定位，元素会叠加在一起，使用z-index可以设置元素显示的层次。

​ 文档流默认的z-index的值为0。

​ 用static和relative元素将无效。

3、网站开发策略：先整体再局部，至顶向下，逐步细化。

​ 1）双飞翼布局：由三列组成，两端固定，中间自适应。

​ margin-left: -100%;意思就是向左移动整个屏幕的距离

​ margin-left: -100px; 就是往左挪100个px；

比如margin-left: -150px;

可以bai理解成，从内容区du（比如DIV、zhitable）的左边算起是0px
不加负号的150px就是从左边0像素算起+150像素的位置，加负号当然就是相反，从0像素往左边（因为是margin-left，所以它的负数是左。margin-right当然就是向右。）+150像素的位置。

​ 优点：（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6.

​ (2)因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。

​ 2）圣杯布局：由三列组成，两端固定，中间自适应，外观与双飞翼布局一样。

​ 布局时与双飞翼比增加了定位和偏移设置。