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