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

  1. 前端 使用CSS属性,使Div上下左右移动指定像素

    前言 前端 使用CSS属性,使Div上下左右移动指定像素 前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求 上面是美工出的图 大概就是2个横着排列的div和分页器居中对齐 ...

  2. html怎么设置一个div可以左右移动,利用css 使div上下左右移动

    在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...

  3. 利用css 使div上下左右移动

    在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...

  4. html如何将div居中置顶层,CSS如何使DIV层居中

    如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明 ...

  5. html怎么使背景图片充屏,css如何使div背景图片填充

    2016-07-08 00:56车庆云 客户经理 css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url( ...

  6. html怎么div剧中,css怎么使div居中?

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. css设置d ...

  7. js,jq,jquery删除css属性

    属性值是不能删除的,只能改变属性值达到我们想要的效果 1.去掉div的高度 <div style='height:50px' id='height'></div> <sc ...

  8. html中div居中的代码怎么写,CSS中让DIV居中的代码

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  9. js获取css属性值的方法

    js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性 通过.dom.style.width=&quo ...

最新文章

  1. HPE 的 OpenSwitch 项目得到 Linux 基金会支持
  2. oracle 怎么创建约束,Oracle创建约束
  3. JavaScript之数据类型
  4. C++ Primer 5th笔记(9)chapter9 顺序容器 vector 容器的自增长 容器适配器
  5. 遇到tensorflow has no attribute 问题
  6. bitnami-redmine Apache服务启动不起来
  7. CSS3边框图片、边框阴影、文本阴影
  8. 【Oracle】三种方式查看SQL语句的执行计划
  9. 初步接触Java中的Lambda表达式
  10. cnn初学者—从这入门_使用Tensorflow为初学者使用CNN进行简单图像分类
  11. c# 调用jtts_Java与C#开发上的一些差异与转换方法
  12. linux可以用什么c语言编译器,嵌入式Linux下最常用的C语言编译器GCC命令详解
  13. 三层交换(VLAN间通信)
  14. 计算机基础学习-什么是并行传输、串行传输、异步传输?
  15. fiddler监控手机请求 1
  16. hadoop自定义排序,分组排序
  17. 亚马逊云科技宣布Amazon Nimble Studio正式可用 云上搭建影像内容工作室仅需几小时
  18. Python利用A*算法解决八数码问题
  19. 电商平台的积分系统设计
  20. 面试官问:ZooKeeper 有几种节点类型?别回答 4 种啦

热门文章

  1. 据大数据统计,就业薪资最高和最低的20个专业【乐搏TestPRO】
  2. 关于货物物品横竖摆放的问题
  3. 儿童矮小症和晚长的区别
  4. 总结篇」别再说自己不会JVM了,看完这篇能和面试官扯上半小时(上)
  5. 据报道,Intel 发布 ARC 系列显卡
  6. IDEA中debug查看request的parameter
  7. C# WinForm TreeView
  8. Windows Xp下清除系统垃圾
  9. html和css的小结
  10. 同济大学官网静态网页图