positio:absolute與position:relative的區別
阿新 • • 發佈:2017-07-28
orm ie瀏覽器 html元素 rgba 需要 tom htm 相對定位 abs
-
absolute 能讓元素 inline-block 化:
例如一個div標簽默認寬度是100%顯示的,但是一旦被absolute屬性纏上,則100%默認寬度就會變成自適應內部元素的寬度。 -
float 可以 inline-block 化元素
-
float 的破壞性:使高度塌陷
absolute 的破壞性:使高度和寬度都塌陷 -
absolute屬性的
破壞性:高寬占據空間為0的特性,
定位性:借助left/top等屬性的定位 - 少用absolute,常見absolute布局的替代實現方案:
- 使用margin代替
-
覆蓋定位一般都離不開absolute屬性
-
opacity屬性的半透明效果不僅會影響到當前元素,所有的子元素也會跟著半透明
使用opacity屬性或是IE filter半透明濾鏡會讓子元素跟著半透明。 -
半透明的純色背景,不使用opacity,替代方案:使用 CSS3 rgba
background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
現代瀏覽器使用CSS3 rgba實現半透明背景色,IE瀏覽器使用漸變濾鏡實現半透明。
-
把絕對定位元素直接放在body標簽下,才能最大限度的發揮絕對定位元素的才能。
- 實現兩欄等高布局的方法:
- display:table-cell
- position:absolute
-
position:absolute的元素無寬度,無高度。
-
絕對定位屬性的元素具有包裹性,等同於沒有高度與寬度的inline-block元素。
-
inline-block化的元素有三大特性:包裹性;高寬可定義;圖文混排。
-
浮動元素有“無高度”特性
-
將需要絕對定位的元素單獨放在relative屬性的標簽下,於是,relative相對定位就不會影響任何其他元素,僅僅是其內部的絕對定位元素。
- absolute 適合用於元素隱藏;
absolute 可以實現等高布局;
少用absolute,可以用 margin 代替。
absolute 元素比較適合放在 body 內。 - relative 的元素,設置偏移時,其原位置保留;
absolute 定位,相對於 static 定位以外的第一個父元素進行定位; - relative:相對於它本身原來的位置進行偏移(配合 right left bottom top屬性進行偏移) 他偏移會空出來一些空白 其余的html元素不會填充這些空白
absolute:相對於同樣設置了position屬性的父級元素進行偏移(除了position:static)如果沒有這樣的html元素 就是body(配合 right left bottom top屬性進行偏移)
positio:absolute與position:relative的區別