Div+CSS图层定位方法总结

Div+CSS图层定位方法总结在Div+CSS的网页布局中，经常会用到图层定位，以便将目标图层定位到需要的位置。

最便捷的方法就是使用margin属性，如margin-left:20px;是将图层左外边距设置为20像素，即将图层向右移动了20像素，再如margin-left:-30px;是将图层左外边距设置为负30像素，即将图层向左移动了30像素。

在功能复杂的图层定位中最好使用position属性，该属性用于图层定位。

position属性有static、relative、absolute、fixed等可选值，再配合top、right、bottom、left偏移属性完成图层定位。

static：静止定位
static为图层定位的默认值。

不设置position属性，或设置position:static时，图层按照Div在文件中的原始位置定位，Div占位符保留。

此时top、right、bottom、left偏移属性定义无效。

relative：相对定位
图层相对于包含它的父元素，配合top、right、bottom、left偏移属性进行定位，Div占位符保留。

之前的兄弟元素会影响它在父元素中的位置。

如：#div1{position:relative; left:100px; top:100px;}
显示效果为div1相对于包含它的图层右移100px、下移100px。

absolute：绝对定位
图层相对于浏览器窗口(浏览器内容区域)，配合top、right、bottom、left偏移属性进行定位，Div占位符删除。

页面滚动时，定位图层跟随一起页面滚动。

如：#div2{position:absolute; left:200px; top:200px;}
显示效果为div2相对于浏览器窗口工作区域左上角右移200px、下移200px。

fixed：固定定位
图层被固定在相对于浏览器窗口(浏览器内容区域)，配合top、right、bottom、left偏移属性进行定位的位置，Div占位符删除。

页面滚动时，定位图层的位置不发生变化。

如：#div3{position:fixed; left:100px; top:200px;}
显示效果为div3被固定在浏览器窗口左边100px，上边200px的位置。

页面滚动时，div3相对于浏览器窗口的位置不发生变化。