知識點1：relative和absolute

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

知識點2：定位

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

知識點3：z-index層級

• ? 提高層疊上下文?

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

• ? z-index=具體數據 position=relative 產生層疊上下文
• ? z-index=0 position=relative 不產生層疊上下文，不會有限制內部absolute元素層疊的問題

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

知識點4：最小化影響原則

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

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

//左上角常用方案 <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中多個元素中的其中一個定位在右上角

//右上角常用方案 <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>

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。