css的定位有什麼？ css定位的總結

這篇文章帶給大家的內容是關於css的定位有什麼？ css定位的總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

定位分為：

#static（預設）： 這是頁面元素position屬性的預設值，元素將依照瀏覽器對網頁中元素的排列規則排列。

注意：此時給元素設定left，right，top，bottom是並沒有任何作用的。

relative（相對定位）：相對自己原來位置的定位！如果先前沒有設定position或position值為static，那麼設定relative後，元素的left，right，top，bottom的位置參考自身原來的位置進行移動。

absolute（絕對定位）：這個大家應該都很了解，也就是脫離文件流的定位。定位參照物為自己的父級，但自己的父級必須擁有position屬性（父級position屬性為static也不行，必須為absolute，relative，fixed中的一個）。如果自己的父級沒有設定position屬性，會一直往上尋找有position屬性且不為static的的祖先元素，直到body元素。

fixed（固定定位）：這個屬性是元素以相對瀏覽器視窗為基準進行定位的，無論怎樣移動你的滑動條，它都會固定在相對於瀏覽器視窗的固定位置，另外要注意，它的兄弟元素將會在位置排布上忽略它的存在。這時候用的top，bottom，left，right也是相對於瀏覽器視窗而言的。

下面分享一下我的心得：

1. fixed會產生相容問題，老IE6不支持，他是相對於瀏覽器進行定位的！

2. 父元素有position屬性（不為static）和padding值，子元素如果只設定absolute那麼不會忽略父元素的padding值，如果設定了left：0 ，top：0則會忽略父元素的padding值。

3. 分享一個擁有absolute屬性的元素的水平居中方法：

方法一：     平常情況下我們都是用left：50%，然後margin-left：-width/2來設定水平居中，下面再分享一個方法，如果在面試中被問到水平居中的方法，可以補充下面那種，加分項！

方法二：     設定子元素：left：0，right：0，然後設定margin： 0  auto 即可水平居中。

4. 大家要注意設定了position後再設定float、margin會有什麼變化，這很重要，以後再跟大家討論。

相關推薦：

CSS3 製作動畫的屬性：transform屬性的介紹

CSS3中偽元素實作氣泡框的程式碼（ before、after）

以上是css的定位有什麼？ css定位的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！