6.當(dāng)元素設(shè)置為絕對(duì)定位后改元素內(nèi)的浮動(dòng)會(huì)自動(dòng)清除
例子:
運(yùn)行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
7.當(dāng)絕對(duì)定位同時(shí)擁有定位屬性和margin屬性、絕對(duì)定位的的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個(gè)方向上一至的時(shí)候其值會(huì)產(chǎn)生疊加效果,而按照方向執(zhí)行疊加后的數(shù)值的偏移
例子:
運(yùn)行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
我們會(huì)發(fā)現(xiàn)這個(gè)紅色的色塊距離左邊200PX.left+margin-left
小結(jié) :
當(dāng)元素同時(shí)擁有浮動(dòng)和絕對(duì)定位時(shí).絕對(duì)定位的優(yōu)先權(quán)大于浮動(dòng).因?yàn)楦?dòng)受文檔的邏輯結(jié)構(gòu)位置限制。而絕對(duì)定位不會(huì)。
所以當(dāng)絕對(duì)定位脫離文檔流,絕對(duì)定位的元素不受浮動(dòng)影響.即float:left會(huì)失效,
數(shù)學(xué)上我們知道.X軸上一個(gè)數(shù)值 Y軸上的一個(gè)數(shù)值即可確定一個(gè)點(diǎn),感官上left right屬于x軸bottom top屬于Y軸。
我們完全可以設(shè)置一個(gè)無(wú)寬度和高度絕對(duì)定位的元素同時(shí)擁有top right bottom left來(lái)實(shí)現(xiàn)其根據(jù)其參考的定位基點(diǎn)的父元素的的大小來(lái)自適應(yīng)大小.
但是IE6不支持.IE6只能識(shí)別left的值而忽視r(shí)ight.所以下面例子請(qǐng)?jiān)诜荌E6以及一下瀏覽器瀏覽
例子:
運(yùn)行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
實(shí)際應(yīng)用:(個(gè)人的習(xí)慣)
標(biāo)題(“標(biāo)題文字”和“更多”)(相對(duì)+絕對(duì))
需要讓一些具有vertical-align:middle屬性的元素抽出文檔流(這個(gè)看具體情況,因?yàn)関ertical-align:middle會(huì)影響文檔中的文字對(duì)齊)(絕對(duì))
固定元素的浮動(dòng)塊(該浮動(dòng)塊內(nèi)的元素布局固定 可以用絕對(duì)定位,并設(shè)置該浮動(dòng)塊為相對(duì))(相對(duì)+絕對(duì))
經(jīng)典論壇討論 :http://bbs.blueidea.com/thread-2910721-1-1.html
本文鏈接:http://www.95time.cn/tech/web/2009/6405.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁(yè) position兩三事 [3] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作 、WEB標(biāo)準(zhǔn)化 版塊參加討論,我還想發(fā)表評(píng)論 。