寫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;。
更多相關內容請到:http://hi.baidu.com/design_bg/blog/category/div%2Bcss%D7%A8%C0%B8
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
