關(guān)于元素的position定位的理解，牛客網(wǎng)的hardy給出了一個比較好的理解： 在html中網(wǎng)頁可以看成一個立體的空間，一個完整的頁面是由很多個頁面堆積形成的，如上圖所示 CSS中Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。 ◆position:static　無定位 該屬性值是所有元素定位的默認(rèn)情況，在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用position:static取消繼承，即還原元素定位的默認(rèn)值。 ◆position:absolute　絕對定位 使用position:absolute，能夠很準(zhǔn)確的將元素移動到你想要的位置， ◆position:fixed　相對于窗口的固定定位 這個定位屬性值是什么意思呢？元素的定位方式同absolute類似，但它的包含塊是視區(qū)本身。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動時不會在瀏覽器視察中移動。例如，它允許框架樣式布局。在頁式媒體如打印輸出中，一個固定元素會出現(xiàn)于第一頁的相同位置。這一點(diǎn)可用于生成流動標(biāo)題或腳注。我們也見過相似的效果，但大都數(shù)效果不是通過CSS來實(shí)現(xiàn)了，而是應(yīng)用了JS腳本。 請?zhí)貏e注意，IE6不支持CSS中的position:fixed屬性。真的非常遺憾，要不然我們就可以試試這種酷酷的效果了。 ◆position:relative　相對定位 所謂相對定位到底是什么意思呢，是基于哪里的相對呢？我們需要明確一個概念，相對定位是相對于元素默認(rèn)的位置的定位。既然是相對的，我們就需要設(shè)置不同的值來聲明定位在哪里，top、bottom、left、right四個數(shù)值配合，來明確元素的位置。

轉(zhuǎn)載于:https://www.cnblogs.com/beatIteWeNerverGiveUp/p/9451711.html

總結(jié)

以上是生活随笔為你收集整理的css中对position的几种定位方式的最佳诠释的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。