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

2024-07-11 08:50:19

字體：大中小

供稿：網(wǎng)友

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

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

復(fù)制代碼

上一篇：在IE6/7/8下識(shí)別html5標(biāo)簽(讓老式瀏覽器識(shí)別html5)

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