如何用css控制div在页面中的位置

CSS中的position property一共有四种：

1. postion: static

2. postion: relative

3. position: fixed

4. position: absolute

如果设置div为static postion, div的位置将不受top,right,left,button等变量的影响，而是按照正常的页面布局进行排版。例：

    div.static {
        position: static;
        border: 3px solid #8AC007;
    }

如果设置div为relative position, 其变量的值将会使div的位置相对其正常(default)位置进行移动。例：

    div.relative {
        position: relative;
        left: 30px;
        border: 3px solid #8AC007;
    }

如果设置div为fixed position, div将会被固定在窗口的固定位置。也就是说无论你如何上下移动页面, div在屏幕上显示的位置始终不变。

    div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 300px;
        border: 3px solid #8AC007;
    }

如果设置div为absolute position, div将会相对于其最近的position ancestor定位。absolute position是可以随页面移动而移动在屏幕上的位置的。

    div.absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100px;
        border: 3px solid #8AC007;
    }

以上CSS你可以放到自己的网页应用里试一下，区别就很明显了。

参考资料：http://www.w3schools.com/css/css_positioning.asp

1、设置div的位置可以通过float和position属性进行修改。
2、float是设置块元素的浮动，可以设置向左或向右浮动，即left和right。更多值急使用方法参考：http://www.w3school.com.cn/cssref/pr_class_float.asp。
3、position属相需要relactive和absolute结合使用。参考：http://www.w3school.com.cn/cssref/pr_class_position.asp

或者改一行代码