位置：71code站长站 → 站长学习 → 网站开发 → HTML DIV+CSS → 实例讲解深入学习CSS网页定位元素

实例讲解深入学习CSS网页定位元素

减小字体

增大字体作者：515down(收集) 来源：515down(网络) 发布时间：2007-6-25 16:39:31

1. position:static|无定位

position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位 [我要我当软件园]

以下为引用的内容：

example:
#div-1 {
position:static;
}

[我要我当软件园]

515down.com

2. position:relative|相对定位

515down.com

使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。 [我要我当软件园]

如果要让div-1层向下移动20px,左移40px: [我要我当软件园]

以下为引用的内容：

example:
#div-1 {
position:relative;
top:20px;
left:40px;
} [我要我当软件园]

[我要我当软件园]

如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。

可见， position:relative;并不是很好用。

[我要我当软件园]

3. position:absolute|绝对定位 515down.com

使用position:absolute;,能够很准确的将元素移动到你想要的位置，让我将 div-1a 移动到页面的右上角:

515down.com

以下为引用的内容：

example:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
} [我要我当软件园]

[我要我当软件园]

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。

[我要我当软件园]

*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

515down.com

4. position:relative + position:absolute|绝对定位+相对定位 515down.com

如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。 515down.com

让div-1a定位于div-1的右上角：

[我要我当软件园]

以下为引用的内容：

example:
<div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
} [我要我当软件园]

515down.com

5. two column layout|两列布局 515down.com

让我们实践position:relative + position:absolute的理论，实现两列布局。

515down.com

以下为引用的内容：

example:
<div id="div-1">
<div id="div-1a">this is the column-one</div>
<div id="div-1b">this is the column-two</div>
</div>
#div-1 {
position:relative;/*父元素相对定位*/
}
#div-1a {
position:absolute;/*子元素绝对定位*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*子元素绝对定位*/
top:0;
left:0;
width:200px;
}