中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

1. position:static|無定位
position:static是所有元素定位的默認(rèn)值, 一般不用注明，除非有需要取消繼承的別的定位

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

2. position:relative|相對(duì)定位
使用position:relative，就需要top,bottom,left,right4個(gè)屬性來配合，確定元素的位置。
如果要讓div-1層向下移動(dòng)20px,左移40px:

example:
#div-1 {
 position:relative;
 top:20px;
 left:40px;
}

如果用到相對(duì)定位，緊隨他的層divafter是不會(huì)出現(xiàn)在div-1的下方，而是和div-1在同一個(gè)高度出現(xiàn)。

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

3. position:absolute|絕對(duì)定位
使用position:absolute;,能夠很準(zhǔn)確的將元素移動(dòng)到你想要的位置，讓我將 div-1a 移動(dòng)到頁(yè)面的右上角:

example:
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

使用絕對(duì)定位的div-1a層前面的或者后面的層會(huì)認(rèn)為這個(gè)層并不存在，絲毫不影響到他們。所以position:absolute;用于將一個(gè)元素放到固定的位置很好用，但是如果需要div-1a層相對(duì)于附近的層來確定位置就不要實(shí)現(xiàn)了。
*這里有個(gè)Win IE的bug需要提到，就是如果為絕對(duì)定位的元素定義一個(gè)相對(duì)的寬度，那么在IE下它的寬度取決于父元素的寬度而不是整個(gè)頁(yè)面的寬度。

4. position:relative + position:absolute|絕對(duì)定位+相對(duì)定位
如果給父元素(div-1)定義為position:relative;子元素(div-1a)定義為position:absolute，那么子元素(div-1a)的位置將相對(duì)于父元素(div-1)，而不是整個(gè)頁(yè)面。
讓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;
}

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) 下一頁(yè) css元素定位 [2]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論