来一发CSS教程―元素的定位

仓酷云

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
1.position:static|无定位
position:static是一切元素定位的默许值,一样平常不必说明，除非有必要作废承继的其余定位
example:以下是援用片断：
#div-1{
position:static;
}
2.position:relative|绝对定位
利用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|相对定位
利用position:absolute;,可以很正确的将元素挪动到你想要的地位，
让我将div-1a挪动到页面的右上角:
example:以下是援用片断：
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}利用相对定位的div-1a层后面的大概前面的层会以为这个层其实不存在，涓滴不影响到他们。以是position:absolute;用于将一个元素放到流动的地位很好用，可是假如必要div-1a层相对四周的层来断定地位就不要完成了。
*这里有个WinIE的bug必要提到，就是假如为相对定位的元素界说一个绝对的宽度，那末在IE下它的宽度取决于父元素的宽度而不是全部页面的宽度。

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

假如给父元素(div-1)界说为position:relative;子元素(div-1a)界说为position:absolute，那末子元素(div-1a)的地位将相对父元素(div-1)，而不是全部页面。
让div-1a定位于div-1的右上角：
example:以下是援用片断：
<divid="div-1">
<divid="div-1a">
thisisdiv-1aelement.
</div>
thisisdiv-1element.
</div>
#div-1{
position:relative;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
5.twocolumnlayout|两列结构
让我们理论position:relative+position:absolute的实际，完成两列结构。
example:以下是援用片断：
<divid="div-1">
<divid="div-1a">thisisthecolumn-one</div>
<divid="div-1b">thisisthecolumn-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;
}注重，在这个例子中会发明夫元素的告知不会跟着子元素的告知变更，以是假如父元素的背景和边框必要界说一个充足高的高度才干显现出来。

6.float|浮动对齐
利用float定位一个元素有float:left;&float:right;两种值。这类定位只能在程度坐标定位，不克不及在垂直坐标定位。并且让上面的元素浮动围绕在它的右边大概右侧。
example:以下是援用片断：
#div-1a{
float:left;
width:200px;
}
7.maketwoclumnwithfloat|浮动完成两列结构
假如让一个元素float:left;另外一个float:right;把持好他们的宽度，就可以完成两列的结构效果。
example:以下是援用片断：
#div-1a{
float:left;
width:150px;
}
#div-1b{
float:left;
width:150px;
}
8.clearfloat|扫除浮动
假如你不想让利用了float元素的上面的元素浮动围绕在它的四周，那末你就利用clear,clear有三个值，clear:left;(扫除左浮动)，clear:right;(扫除右浮动)，clear:both;(扫除一切浮动)。
example:以下是援用片断：
<divid="div-1a">thisisdiv-1a</div>
<divid="div-1b">thisisdiv-1b</div>
<divid="div-1c">thisisdiv-1c</div>
#div-1a{
float:left;
width:190px;
}
#div-1b{
float:left;
width:190px;
}
#div-1c{
clear:both;
}
至此，这个css的定位部分就停止了，你能够下手体味体味加深印象。</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

仓酷云

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.