寫css樣式表也有很長時(shí)間了，但是有些css樣式的屬性還是會(huì)出現(xiàn)一些問題。比如說過去寫css樣式的時(shí)候?qū)τ趐osition屬性幾乎不太用。相對(duì)來說也是比較陌生的。各個(gè)瀏覽器的不同解析結(jié)果也是一個(gè)大問題。寫這篇文章和大家一起來深入的學(xué)習(xí)一下position屬性的用法以及background-position屬性的用法。
Position的英文原意是指位置、職位、狀態(tài)。也有安置的意思。在CSS布局中，Position屬性發(fā)揮著非常重要的作用，很多容器的定位是用Position屬性來完成。
先來看一CSS樣式表中的Position屬性有以下幾個(gè)值：static，relative，absolute，fixed。
Static：靜態(tài)定位。如果你沒有設(shè)置position屬性，那么缺省就是static。top，left，bottom，right等屬性，在static的情況下是無效的，要使用這些屬性，必須把position設(shè)置為其他三個(gè)值之一。
Relative：相對(duì)定位。元素將按照靜態(tài)定位時(shí)的位置進(jìn)行調(diào)整，在靜態(tài)定位中分配給元素的空間仍然會(huì)分配給它，它兩邊的元素不會(huì)向它靠近來填充那個(gè)空間，但它們也不會(huì)從元素的新位置被擠走。
Absolute：絕對(duì)定位。元素將按照包含它的元素的位置進(jìn)行調(diào)整，比如它嵌套在另一個(gè)絕對(duì)定位的元素中，那么就相對(duì)于那個(gè)元素定位。
Fixed：固定定位。元素將被設(shè)置在瀏覽器上一個(gè)固定位置上，不會(huì)隨其他元素滾動(dòng)。形象點(diǎn)說，上下拉動(dòng)滾動(dòng)條的時(shí)候，fixed的元素在屏幕上的位置不變。需要注意的是IE6并不支持此屬性。請(qǐng)?zhí)貏e注意，IE6不支持CSS中的position:fixed屬性。
用一個(gè)小實(shí)列來說明：
代碼部分：
<style>
.fl{float:left; width:60px; background:#99CCFF; border:#CCCCCC solid 1px; height:20px; margin-left:10px; text-align:center}
</style>
<body>
<div>
<div class="fl" style="position:static; top:20px; left:50px;">百度</div><div class="fl">google</div> <div class="fl">sina</div> <div class="fl">firefox</div>
</div>
</body>
你也以看一上運(yùn)行結(jié)果，分別將position:static替換為relative，absolute;來查看效果圖。
注意：很多網(wǎng)頁都是居中的，這樣，當(dāng)對(duì)元素進(jìn)行絕對(duì)定位的時(shí)候，在不同的分辨率下顯示會(huì)有偏差，這時(shí)，我們可以通過類似下面的方法來處理：
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
最后來講講background-position屬性；background-position屬性是來確定背景圖片的位置。Background-position:center 25px;這代表什么意思呢？是指背景圖片居中顯示，而且與頂部的距離是25個(gè)象素。當(dāng)然也可以設(shè)置其它的值。然后我們用一個(gè)小小的css樣式實(shí)例來說明一下：
<style>body{ BACKGROUND:url(images/bg.png) repeat-x;}
.totbg{BACKGROUND-POSITION:center 25px;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-IMAGE:url(http://images.cnblogs.com/baiyjkbg.png);} </style>
<body>
<div class="totbg"></div>
</body>
簡(jiǎn)單說明一下：BACKGROUND:url(images/bg.png) repeat-x;是表示整個(gè)body頁面的背景是bg.png,并且水平重復(fù)。 .totbg{BACKGROUND-POSITION:center 25px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-IMAGE:url(http://images.cnblogs.com/baiyjkbg.png);}表示整個(gè)最外層div的背景所在的位置并且不重復(fù)循環(huán)。如果你不想讓背景跟隨滾動(dòng)條動(dòng)的話也可以這樣在以上樣式表中加入background-attachment:fixed;。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
