使用css属性，使div上下左右移动

在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上下左右移动相关推荐

前端使用CSS属性，使Div上下左右移动指定像素
前言前端使用CSS属性,使Div上下左右移动指定像素前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求上面是美工出的图大概就是2个横着排列的div和分页器居中对齐 ...
html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
html如何将div居中置顶层,CSS如何使DIV层居中
如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明 ...
html怎么使背景图片充屏,css如何使div背景图片填充
2016-07-08 00:56车庆云客户经理 css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url( ...
html怎么div剧中,css怎么使div居中？
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. css设置d ...
js,jq,jquery删除css属性
属性值是不能删除的,只能改变属性值达到我们想要的效果 1.去掉div的高度 <div style='height:50px' id='height'></div> <sc ...
html中div居中的代码怎么写,CSS中让DIV居中的代码
CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...

使用css属性，使div上下左右移动

使用css属性，使div上下左右移动相关推荐

最新文章

热门文章