[網頁設計]CSS 定位之position
在前端網頁佈局中，在同一平面上佈局，咱們大都採用float屬性來定位網頁元素的位置。可是涉及到彈出層、浮層、頁面廣告插件等等，都須要CSS 中的position屬性來定位了，對於初學者來講常常分不清楚是應該用position屬性的absolute值、relative值、fixed值等 等，下面咱們就position屬性基本的這三個值的用法作一些簡單的介紹，但願對初學者有些幫助。css
一、position的absolute（絕對定位）html
在這裏position的absolute絕對定位咱們分兩類來說：前端
A：給元素定義了position:absolute，其父框架沒有定義任何position屬性。此時的絕對定位就是相對於頁面四周最邊緣來進行定位 的，位置將依據瀏覽器左上角的0點開始計算，絕對定位使元素與文檔流無關，所以不佔據空間。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。其位置不受父框架的影響，只以頁面四周邊緣開始計算。代碼以下：web
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><div >position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
效果以下圖：編程
B： 給元素定義了position:absolute，其父框架定義了position:absolute\position:relative \position:fixed屬性。此時的絕對定位就是相對於父框架最邊緣最邊緣來進行定位的，絕對定位使元素與文檔流無關，所以不佔據空間。元素的位 置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。其位置只在父框架內作變化，代碼以下：瀏覽器
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head><body><div ><div >position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
效果以下圖框架
因此，若是頁面元素的定位，想要定義在父元素內，而不受顯示器分辨率，瀏覽器窗口大小等限制時，建議採用B種方案。工具
二、position的relative（相對定位） 佈局
若是對一個元素進行相對定位，首先它將出如今它所在的位置上。而後經過設置垂直或水平位置，讓這個元素「相對於」它的原始起點進行移動。（再一點，相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框）。post
relative的確是相對於本身來定位的,父DIV設置了position:relative 沒有給出值，它自身是沒有效果的
可是對於它的子元素起到了參照做用
三、position的fixed fixed老是以body爲定位時的對象，老是根據瀏覽器的窗口來進行元素的定位，經過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。
關於position用法貌似還有不少，小編語言組織能力不是太好，總結一下用法：
當你須要作一個有下拉二級菜單效果時，父元素你須要position:relative，而裏面的下拉元素則須要position:absolute。
當你須要作一個頁面漂浮的廣告，或者作一個返回頁面頂端的按鈕是，你須要position:fixed。
通 常咱們使用position:absolute；position:relative進行絕對定位佈局，經過CSS進行定義定位，DIV佈局HTML，注 意什麼地方使用position:relative，什麼地方使用position:absolute進行定位，同時不要忘記使用left、right、 top、bottom的配合定位具體位置。絕對定位若是父級不使用position:relative，而直接使用position:absolute絕 對定位，這個時候將會以body標籤爲父級，使用position:absolute定義對象不管位於DIV多少層結構，都將會被拖出 以<body>爲父級（參考級）進行絕對定位。絕對定位很是好用，但切記不要濫用，什麼地方都用，這樣有時會懶得計算距離上、下、左、右間 距，同時可能會形成CSS代碼臃腫，更加經驗適當使用，用於該使用地方。
在絕對定位時候咱們可使用css z-index定義css層重疊順序。
同時left、right、bottom、top的數值，可使用（Photoshop）PS切片工具獲取準確的數值。
末 了，小編在提醒一句，若是你在你的父DIV裏面的子DIV使用了position:absolute屬性定位，而父DIV沒有作任何定義（父DIV裏面已 經被其餘元素填充佔據），還想要子DIV定義起到做用，這個時候子DIV你能夠不用left、top、right、bottom來定義，可使用 margin-top、margin-left來定義，可是此種方法在ie6/7下和ie8/9/10/十一、火狐、谷歌下面的位置是不同的，針對 ie6/7你須要用到css Hack，代碼以下：
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><img src="1.jpg" width="600" height="600" /><div >position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
效果以下圖
使用CSS Hack以後 代碼：
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div ><img src="1.jpg" width="600" height="600" /><div >position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
在各個版本的瀏覽器下的 效果以下
此種方法最好不要使用 在不一樣版本瀏覽器下須要來回的用CSS Hack調整！
CSS position 屬性
版本: CSS2 JavaScript 語法: object.style. position="absolute"可能的值 值描述 absolute 生成絕對 定位的元素,相對於 static 定位之外的第一個父元素進行 定位。 ...CSS定位屬性Position詳解 - 頁製做 - 藍色理想
CSS中最經常使用的佈局類屬性,一個是Float( CSS浮動屬性Float詳解),另外一個就是 CSS定位屬性 Position。 1. position:static 全部元素的默認 定位都是: position:static,這...CSS 定位
CSS position 屬性 經過使用 position 屬性,咱們能夠選擇 4 種不一樣類型的 定位,這會影響元素框生成的方式。 position 屬性值的含義: static 元素框正常生成。塊級...CSS中的定位標籤position_websbook_頁設計手冊
文中詳細解釋了關於 CSS定位標籤 position的一些屬性與使用方法,咱們常常是使用 position標記來製做絕對 定位與相對 定位的浮動效果,好比二級菜單浮動效果就是使用這個標記制...CSS 定位之position - 推酷
在前端頁佈局中,在同一平面上佈局,咱們大都採用float屬性來 定位頁元素的位置。可是涉及到彈出層、浮層、頁面廣告插件等等,都須要 CSS中的 position屬性來 定位了,...position=absolute之相對父元素定位-css-電腦編程
[] css, position, absolute, 相對, 定位 position=absolute之相對父元素 定位 absolute:相對於 static 定位之外的第一個父元素進行 定位。 也就是父元素的 position取值...CSS中position:fixed固定定位用法指導 - 51CTO
CSS佈局浮動(float)和定位(position)屬性的區別和如何..._標準之路
postion:relative是子塊級元素面向父級元素的相對 定位, 定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行 定位,可是 position移動後,原位置...CSS定位(position : static|absolute|fixed|relative)|中國頁設計
頁配色 頁佈局 設計欣賞 頁設計理論 HTML/HTML5 CSS Javascript Dreamweaver FLASH CSS定位( position : static|absolute|fixed|relative)...IE6下實現CSS固定定位{position:fixed}_源碼愛好者
IE6下實現 CSS固定 定位{ position:fixed},絕對 定位CSS實現。運行一下代碼就會發現它的利害。固定和相對 定位,是 CSS中兩種常常用到的基礎技巧,有必要經過這些小實例掌握其...十步圖解CSS的position - 博客 - 伯樂在線
CSS頁佈局關於定位position - CSS教程 - 芊藍大 - 芊藍教程...
1 DIVCSS視頻教程之position定位屬性 在線觀看 - 酷6視頻
時長: 45分鐘
1DIVCSS視頻教程之position定位屬性在線觀看，1DIVCSS視頻教程之position定位屬性
v.ku6/show/XIal-bWyj... 2015-1-3總結一下CSS中的定位 Position 屬性 - Rising_Sun - 博客園
在 CSS中, Position 屬性常常會用到,主要是絕對 定位和相對 定位,簡單的使用都沒有問題,尤爲嵌套起來,就會有些混亂,今記錄總結一下,防止久而忘之。 CSS position 屬性...css中position相對定位和絕對定位(relative,absolute)詳解
CSS元素之position 定位 | 學步園
css元素定位 - 藍色理想
第1 頁 css元素 定位 [1] 第2 頁 css元素 定位 [2]1. position:static|無 定位position:static是全部元素 定位的默認值, 通常不用註明,除非有須要取消繼承的別的...詳解CSS定位屬性Position用法_CSS教程_站建設學院_希賽
CSS中最經常使用的佈局類屬性,一個是Float( CSS浮動屬性Float詳解),另外一個就是 CSS定位屬性 Position,這裏向你們描述一下 CSS定位屬性 Position的用法。DIV CSS絕對定位佈局案例 position佈局實例 - DIVCSS5
CSS樣式表中的position屬性詳細說明_CSS教程_CSS_頁製做_腳本之家
CSS position屬性使用說明,須要的朋友能夠參考下。... CSS position屬性使用說明,須要的朋友能夠參考下。 在 CSS中關於 position定位的內容是: position: relative | ...css定位屬性position的相對定位與絕對定位 - 魯谷-lugu design-...
簡明CSS定位屬性position_解讀張小龍產品祕訣:讓用戶爽!_腳本百事通
簡明 CSS定位屬性 position點評: POSITION屬性用來決定元素在頁面上的位置,其 定位屬性有多個,下面一一爲你們介紹下,但願你們在使用過程當中能夠用到 POSITION 該...CSS定位屬性position的應用_圖片_DREAMWEAVER_教育_阿邦
[] CSS定位屬性 position的應用 黃超 dreamweaver (394) 推廣連接:- 1. CSS之position定位
- 2. css之position定位
- 3. 網頁搭建入門---CSS定位position
- 4. css定位position
- 5. CSS Position（定位）
- 6. css-定位（position）
- 7. CSS定位(position)
- 8. css position定位
- 9. CSS 定位position
- 10. CSS - position 定位
- 更多相關文章...
- • Web 創建設計 - 網站建設指南
- • Web 網頁 驗證 - 網站建設指南
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • IntelliJ IDEA代碼格式化設置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
- 1. CSS之position定位
- 2. css之position定位
- 3. 網頁搭建入門---CSS定位position
- 4. css定位position
- 5. CSS Position（定位）
- 6. css-定位（position）
- 7. CSS定位(position)
- 8. css position定位
- 9. CSS 定位position
- 10. CSS - position 定位