div+css相對(duì)定位和絕對(duì)定位用法實(shí)例詳解

2024-07-11 08:28:39

字體：大中小

供稿：網(wǎng)友

在用DIV+CSS控制排版過程中，定位一直被人認(rèn)為是一個(gè)難點(diǎn)，這主要是表現(xiàn)為很多網(wǎng)友在沒有深入理解清楚定位的原理時(shí)，排出來的雜亂網(wǎng)頁常讓他們不知所措，而另一邊一些高手則常常借助定位的強(qiáng)大功能做出些很酷的效果來，比如CSS相冊(cè)等等，因此自己雜亂的網(wǎng)頁與高手完美的設(shè)計(jì)形成鮮明對(duì)比，這在一定程度上打擊了初學(xué)定位的網(wǎng)友，也在他們心目中形成這樣的一種思想：當(dāng)我熟練地玩轉(zhuǎn)DIV+CSS定位時(shí)，我就已是高手了。不管你怎么想，我只希望下面的教程能讓你更深入地了解CSS定位屬性。

1.定位的專業(yè)解釋
(1)語法
position:static|absolute|fixed|relative
從上面語法可以看出，定位的方法有很多種，它們分別是靜態(tài)(static)，絕對(duì)定位(absolute)，固定(fixed)，相對(duì)定位(relative)。在這個(gè)教程里，我不逐一講，只講最常用也是最實(shí)用的兩個(gè)定位方法：絕對(duì)定位(absolute)、相對(duì)定位(relative)。
(2)說明
相對(duì)定位(relative)：相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。
如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。

復(fù)制代碼

代碼如下:
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

如下圖所示：

注意，在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。
絕對(duì)定位(absolute)：將被賦予此定位方法的對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性，即還是遵循HTML定位規(guī)則的，則依據(jù)body對(duì)象左上角作為參考進(jìn)行定位。絕對(duì)定位對(duì)象可層疊，層疊順序可通過z-index屬性控制，z-index值為無單位的整數(shù)，大的在最上面，可以有負(fù)值(目前負(fù)值FF不支持)。
絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。
普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣：

復(fù)制代碼

代碼如下:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

上一篇：Div設(shè)置最小寬度(有浮動(dòng)元素或?yàn)g覽器寬度小于1350之后)

下一篇：firefox不顯示border通過清除float便可解決

發(fā)表評(píng)論

共有條評(píng)論