CSS-positon

position屬性規(guī)定元素的定位類型。任何元素都可以定位， 不論該元素本身是什么類型,絕對或固定元素會生成一個塊級框， 相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。

默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。 忽略 top, bottom, left, right 或者 z-index 聲明。

生成**絕對定位**的元素. 相對的是向上第一個不是static默認(rèn)定位的元素，如果沒有找到，則相對于document 注：(document對象 -- 代表整個HTML 文檔,可用來訪問頁面中的所有元素：)。 元素的位置通過left,top,right以及bottom屬性進(jìn)行規(guī)定。

.father { width: 300px; height: 200px; margin-left: 100px; margin-top: 100px; position: absolute; background: yellow; } .child { width: 100px; height: 100px; position: absolute; background: green; top: 50px; left:50px; }

為了更好的顯示效果，父元素具有外邊距，此時可以發(fā)現(xiàn)子元素相對于父元素的左上角定位。效果如下：

當(dāng)去掉父元素的position：absolute是，效果圖如下，此時子元素相對于document進(jìn)行定位。效果圖如下：

為了驗證此時absolute相對document定位,編寫如下代碼

body{ height: 0px; }

效果如下圖所示：

生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位,不隨滾動條滾動。 元素的位置通過left、top、right以及bottom屬性進(jìn)行規(guī)定。

.father { width: 300px; height: 200px; margin-left: 100px; margin-top: 100px; position: absolute; background: yellow; } .child { width: 100px; height: 100px; position: fixed; background: green; top: 0px;

效果如圖所示：

生成相對定位的元素，相對于其自身正常位置(這個位置是static的位置)進(jìn)行定位。

例，如下面代碼就是static狀態(tài)下。

.father { width: 300px; height: 200px; background: yellow; } .child { width: 100px; height: 100px; background: green; }

效果如下圖所示：

當(dāng)child的css設(shè)置為relative時，會相對于原位置進(jìn)行定位

.child { width: 100px; height: 100px; position: relative; background: green; top: 50px; left:50px; }

效果如下圖所示

規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

css3新屬性，實驗性的屬性，不推薦使用。

CSS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。