?在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定位中的偏移點擊打開鏈接
---------------------
作者：qq_26780317
來源：CSDN
原文：https://blog.csdn.net/qq_26780317/article/details/80486766
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

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

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