??? 在html中，有時需要使某個div上下左右移動，使div元素位置產生偏移。本文使用了css3的transform:translate(X,Y)，和css的相對定位來實現div元素的偏移。

一、使用css3 transform:translate(X,Y)來偏移元素

??? ①transform屬性應用于元素的2D或3D轉換，這個屬性允許你將元素旋轉，縮放，移動，傾斜等。其基本屬性如下所示：

值描述

none	定義不進行轉換。
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿著 X 軸的 3D 旋轉。
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n)	為 3D 轉換元素定義透視視圖。

②其中，使用transform:translate(X,Y)來偏移元素

語法運用：

.div1{transform:translateY(-50%);/**上移元素**/-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%); } .div2{transform:translateY(50%);/**下移元素**/-ms-transform:translateY(50%);-webkit-transform:translateY(50%); } .div3{transform:translateX(-50%);/**左移元素**/-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%); } .div4{transform:translateX(50%);/**右移元素**/-ms-transform:translateX(50%);-webkit-transform:translateX(50%); }

? 二、使用css相對定位來偏移元素?

??????? css相對定位

??????? 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

??????? 如果將top設置為20px,那么框將在原位置頂部下面的20像素的地方。如果left設置為30像素，那么會在元素左邊創建30像素的空間，也就是將元素向右移動。

#box_relative {position: relative;left: 30px;top: 20px; }

??? 如下圖所示：

注意：在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其他框。相對定位會按照元素的原始位置對該元素進行移動。

三、總結與思考

?? 這次，把html中用過的div元素位移的方法，記錄一下。

????如文章哪里有問題，歡迎大家留言，進行指正，謝謝！

參考博客：深入理解CSS定位中的偏移點擊打開鏈接

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

總結

以上是生活随笔為你收集整理的使用css属性，使div上下左右移动的全部內容，希望文章能夠幫你解決所遇到的問題。

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