position和transform的用法

2021-10-10 04:02:07 字數 498 閱讀 4412

css中我們想要改變乙個元素的位置,我們可以採用的方法之一就是定位,這也是我們最先接觸的方法。其主要用法就是給需要移動的元素的父元素或以上新增 position:relative; 再給自身新增 position:absolute; 然後通過改變方位(top,left,right,bottom)來實現元素的移動。

css3中提供了transform屬性,其中的translatex和translatey值可以實現元素的橫向與縱向移動。

區別和選擇

經過測試。transform效能消耗只有position的十分之一!可想而知,css3推出新的transform屬性也是加快了瀏覽器的執行速度。

總的來說,當我們能用transform實現預想的效果就不要去使用position了,乙個小小的demo就能達到10倍的差距,可想而知在大型專案中差距會更加明顯。

使用transform會比top少乙個layout延時

transform的composite layers經多次測試 延時普遍會大於top

定位和position定位

定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位,是頁面元素預設的定位方式 塊級 從上到下,獨佔一行 行級 從左到右,不獨佔一行 浮動定位 1.浮動元素脫離文件流,未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣 3.浮...

offset和position的區別

使用jquery獲取元素位置時,我們會使用position 或offset 方法,兩個方法都返回乙個包含兩個屬性的物件 左邊距和上邊距,它們兩個的不同點在於位置的相對點不同。可以看看下邊的圖 從圖中我們可以大體看出兩者的區別。position 獲取相對於它最近的具有相對位置 position rel...

position和float的區別

只有position才是定位,float不能說是定位,不過你可以說這兩種布局方式有什麼不同。float和position這兩者並沒有孰好孰不好的問題,兩者按需使用,各得所需的效果。float從字面上的意思就是浮動,float能讓元素從文件流中抽出,它並不佔文件流的空間,典型的就是 混排中文字環繞的效...