中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > position兩三事
CSS3的五個使用技巧 回到列表 回車鍵觸發(fā)表單提交的問題
 position兩三事

作者:aslen 時間: 2009-02-16 文檔類型:原創(chuàng) 來自:藍(lán)色理想

第 1 頁 position兩三事 [1]
第 2 頁 position兩三事 [2]
第 3 頁 position兩三事 [3]
第 4 頁 position兩三事 [4]

position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為默認(rèn)的方式。所以實際上可用的值只有3個 為了方便閱讀~
以下統(tǒng)稱為:固定(fixed)、相對(relative)、 絕對(absolute).

第1:固定定位(fixed)

固定定位可以讓某一元素固定在屏幕的某個位置.其效果和背景的background-attachment:fixed屬性相似!但是IE6以及更早的版本不支持.所以以下例子請在非IE6以下瀏覽器下瀏覽

例子:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

第2:相對定位(relative)

相對定位是依據(jù)設(shè)置定位屬性的4個方向上的任意值來實現(xiàn)相對與其本來在文檔中正常顯示的位置的偏移;

當(dāng)相對定位的元素偏移出其本來的文檔流的位置:其他元素仍然認(rèn)為那個位置為其的邏輯文檔流區(qū)域.而不會去補上去,雖然我們感官上認(rèn)為那里是沒有東西的~

例子:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

其中第2個色塊就是相對于其本來的文檔流中的位置依據(jù)left:10px;top:20px;的定位屬性值進(jìn)行偏移.

其后面的第3個色塊依然認(rèn)為前面的空白(就是第3的原本的文檔流的位置)為第3個色塊的文檔流區(qū)域 則不會自動填充上去.

當(dāng)相對定位的父元素出現(xiàn)滾動條時,IE瀏覽器的特殊情況
例子:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

當(dāng)相對定位的父元素有滾動條的時候,該相對定位元素再IE的表現(xiàn)很詭異(其后面的元素依然認(rèn)為那個位置為該元素的默認(rèn)位置,而表現(xiàn)出相對定位的特性,但是拉動滾動條時,在FF下正常即相對定位的元素和文檔一起滾動,但是在IE系列里面,相對定位的色塊依然在原地不動,此時元素的特性有點像絕對定位)

當(dāng)相對定位同時擁有定位屬性的4個方向的值和margin屬性。相對定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產(chǎn)生疊加效果,而按照方向執(zhí)行疊加后的數(shù)值的偏移

例子:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

出處:藍(lán)色理想
責(zé)任編輯:bluehearts

上一頁 下一頁 position兩三事 [2]

◎進(jìn)入論壇網(wǎng)頁制作WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。

相關(guān)文章 更多相關(guān)鏈接
制作一幅撲克牌系列教程
用div+css模擬表格對角線
Opera的WEB標(biāo)準(zhǔn)教程
快速定位頁面中復(fù)雜 CSS BUG
border-radius與圓角
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/41個記錄/頁 轉(zhuǎn)到 頁 共4個記錄

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2