CSS所提供的Position定位屬性在進(jìn)行網(wǎng)頁(yè)頁(yè)面布局過(guò)程中非常重要，通過(guò)使用Position定位屬性可以實(shí)現(xiàn)對(duì)頁(yè)面元素進(jìn)行精確定位，最終達(dá)到較好的設(shè)計(jì)及頁(yè)面展示效果。本文主要針對(duì)Position屬性設(shè)計(jì)教學(xué)案例，實(shí)現(xiàn)教學(xué)。

CSS學(xué)習(xí)教程

---

Position定位屬性

Position定位屬性為設(shè)計(jì)人員提供5類定位模式，分別為static靜態(tài)定位、relative相對(duì)定位、absolute絕對(duì)定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對(duì)定位、絕對(duì)定位與固定定位三種模式。

static靜態(tài)定位：該定位模式為HTML元素默認(rèn)定位形式，各類元素按照文檔流對(duì)象模型正常排列。使用static定位是，top，left，right，bottom屬性無(wú)效。

relative相對(duì)定位：該定位模式是指相對(duì)自身位置定位(可以理解為相對(duì)默認(rèn)位置進(jìn)行定位)，通過(guò)使用top，left，right，bottom屬性實(shí)現(xiàn)偏移，該定位模式不會(huì)影響正常文檔流，即其他元素位置相對(duì)默認(rèn)位置不變。在DIV嵌套時(shí)可以對(duì)父層使用該屬性為子層絕對(duì)定位提供祖先。

absolute絕對(duì)值定位：該定位形式將其最近定位的元素確定為祖先元素，參照祖先元素位置實(shí)現(xiàn)定位。如果祖先元素沒(méi)有任何定位的話，則以body為祖先元素進(jìn)行定位。該定位模式將使得被定位元素脫離文檔流。即不保留默認(rèn)情況下該元素位置。

fixed固定值定位：該定位模式相對(duì)于視口進(jìn)行定位，定位元素不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)。與absolute定位的最大區(qū)別在于absolute是相對(duì)body內(nèi)容區(qū)域進(jìn)行的定位，會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)。

以上給出了position屬性常用的定位方式，在實(shí)際進(jìn)行頁(yè)面設(shè)計(jì)及元素布局過(guò)程中可以使用以上屬性實(shí)現(xiàn)元素的精確定位。

---

定位實(shí)例

為演示定位屬性使用，本文設(shè)計(jì)制作上海世界技能大賽選手證，要求學(xué)生使用HTML進(jìn)行選手證的設(shè)計(jì)及編碼實(shí)現(xiàn)。要求：

選手證需要包含四個(gè)DIV層，分別用于表示背景框架層、頂部Logo層、選手照片層及選手信息層；

使用定位屬性實(shí)現(xiàn)各層的精確定位；

本例設(shè)計(jì)要求如上所示，設(shè)計(jì)實(shí)現(xiàn)參考效果如下所示：

參賽證設(shè)計(jì)樣式

參賽證設(shè)計(jì)樣式描述如上圖所示，基本元素來(lái)自世界技能大賽上海網(wǎng)站，主要logo包含上海世賽標(biāo)識(shí)LOGO、選手照片與選手信息。所需素材如下：

案例所需素材

---

實(shí)現(xiàn)代碼

本例實(shí)現(xiàn)代碼如下所示：

CSS樣式文件

頁(yè)面body部分

本例實(shí)現(xiàn)代碼如上所示，其中CSS樣式部分用于實(shí)現(xiàn)div布局樣式，頁(yè)面body部分為頁(yè)面呈現(xiàn)內(nèi)容。本例父元素使用relative屬性進(jìn)行定位，所有子元素均以父元素為基礎(chǔ)使用absolute進(jìn)行精確定位。

---

本頭條號(hào)長(zhǎng)期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見(jiàn)，可在評(píng)論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！如需完整案例代碼請(qǐng)關(guān)注并私信作者。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css怎么使元素绝对定位有过度效果_CSS定位属性Position实例分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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