知識(shí)點(diǎn)1：relative和absolute

• ? relative: 相對(duì)自身，并會(huì)限制內(nèi)部absolute元素層疊
• ? absolute: 相對(duì)容器，并受到父類容器relative的影響，比如：overflow:hidden/scroll
• ? fixed: 不受relative限制，只受z-index的限制

知識(shí)點(diǎn)2：定位

• ? 相對(duì)自身
• ? 無侵入: relative的元素只會(huì)改變自己本省的定位，不會(huì)影響其他元素，比如：巧妙應(yīng)用自定義拖拽
• ? top/bottom left/right 對(duì)立屬性： 對(duì)于已經(jīng)relative的元素設(shè)置top/bottom時(shí)，top屬性有效，設(shè)置left/right屬性時(shí)，left有效

知識(shí)點(diǎn)3：z-index層級(jí)

• ? 提高層疊上下文?

//給元素沒有添加定位之前，圖片2默認(rèn)會(huì)覆蓋圖片1 //添加定位之后，無論圖片2如果設(shè)置位置，都不會(huì)覆蓋圖片1 <div><img src="圖片1" style="position: relative"><img src="圖片2"> </div>

• ? z-index=具體數(shù)據(jù) position=relative 產(chǎn)生層疊上下文
• ? z-index=0 position=relative 不產(chǎn)生層疊上下文，不會(huì)有限制內(nèi)部absolute元素層疊的問題

//外層div不加定位前，內(nèi)div1的層級(jí)低于內(nèi)div2的層級(jí) //外層div添加定位和z-index=數(shù)值時(shí)，外層div1的層級(jí)高于外層div2的層級(jí)，從而使得內(nèi)div1高于內(nèi)div2（IE6.7失效） //外層div只加定位和z-index=0/auto，不會(huì)影響內(nèi)部div的層級(jí)關(guān)系 <div><div style="position: relative; z-index: 3">外層div1<div style="z-index:1">內(nèi)div1</div></div><div style="position: relative; z-index: 2">外層div2<div style="z-index:3">內(nèi)div2</div></div> </div>

知識(shí)點(diǎn)4：最小化影響原則

• 最小化影響原則是指盡量降低relative布局對(duì)其他元素或布局的潛在影響

? 案例一 將div中多個(gè)元素中的其中一個(gè)定位在左上角

//左上角常用方案 <div style="position: relative"><img src="" alt="" style="top:0px; left:0px"><div></div><div></div><div></div> </div> //左上角推薦方案 <div><img src="" alt="" style="position: absolute;"><div></div><div></div><div></div> </div>

??案例二：將div中多個(gè)元素中的其中一個(gè)定位在右上角

//右上角常用方案 <div style="position: relative"><img src="" alt="" style="position:absolute; top:0px; right:0px"><div></div><div></div><div></div> </div> //右上角推薦方案 <div style="positon:relative"><img src="" alt="" style="position: absolute;top:0px; right:0px"> </div> <div><div></div><div></div><div></div> </div>

?

總結(jié)

以上是生活随笔為你收集整理的CSS3笔记之定位篇（一）relative的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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