如何在css中使用position屬性？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯專注于安次網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供安次營銷型網站建設，安次網站制作、安次網頁設計、安次網站官網定制、成都微信小程序服務，打造安次網絡公司原創(chuàng)品牌,更為您提供安次網站排名全網營銷落地服務。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

事實上默認的static和fixed這兩種情況是比較容易辨別的，而容易混淆的是relative和absolute。

用更簡單的說法就是absolute是將原本在文檔流中所占的位置去掉，并以第一個非static定位的父元素進行定位，一般這樣我們都會用top,left等來控制位置，這就是絕對定位。

而relative這種定位方式則是，在原有的文檔流位置（也就是未設置POSITION屬性的時候的位置）基礎上移動。

所以當我們一般需要讓某些元素隨父元素移動而不會因為瀏覽器窗口大小變動而變形時，一般我們會把父元素定義為relative，而子元素定義為absolute，也就是說absolute是以第一個非static定位的父元素作為參考對象。

而一般我們會讓內容居中，讓margin：0 AUTO；就好了。

至于top和margin-top的區(qū)別，有些人可能分不清什么時候用，經常會用margin-top來實現定位，事實上這種做法是錯誤的，margin它是外邊距，是占內容的，往往用這個來勉強實現定位都會使其他元素位置改變或導致其他效果，而這個效果并非我們想要的。

所以要認清absolute和relative的區(qū)別和用法，加上TOP LEFT RIGHT BOTTOM來定位就可以減少錯誤了。

順帶一提，CSS3之后多了挺多新屬性的，自己還沒一個個看，暫時記一下，background-size:cover;這個是本身就有還是后來才有的？我用DW8的時候并沒有這個屬性提示；

另外CSS3有很多屬性IE是不能支持的，即使有那也是9甚至10以上才能兼容，所以在寫的時候要注意瀏覽器的判斷，根據不同瀏覽器設計不同的樣式

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯行業(yè)資訊頻道，感謝您對創(chuàng)新互聯的支持。

當前標題：如何在css中使用position屬性
文章路徑：http://aaarwkj.com/article26/godocg.html

成都網站建設公司_創(chuàng)新互聯，為您提供虛擬主機、網頁設計公司、自適應網站、用戶體驗、服務器托管、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯