在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. Xilinx FPGA 仿真环境设置(ISE + Modelsim + Debussy)
  2. 2021考研数学一李林4套卷整理
  3. CSDN蒋涛大数据表明:DCO - 区块链时代企业级服务的全新机会
  4. 如何找到status group里定义的所有status value
  5. mysql查询今天_昨天_7天_近30天_本月_上一月 数据_mysql查询今天、昨天、7天、近30天、本月、上一月 数据...
  6. P4555-[国家集训队]最长双回文串【Manacher】
  7. vector占用内存的释放
  8. Nginx 模块开发高级篇
  9. 用tensorflow框架和Mnist手写字体,训练cnn模型以及测试一张手写字体
  10. 设计模式的征途—23.解释器(Interpreter)模式
  11. IDA 7.0在Mojava更新后打不开的问题
  12. fft和freqz的区别
  13. Spring框架浅谈及Spring框架学习小结
  14. 【数据分析】面经(搬运)
  15. Scrapy爬虫快速入门
  16. 2021-2025年中国冷链跟踪和监测系统行业市场供需与战略研究报告
  17. 正点原子IIC例程讲解笔记(三)——24cxx.c中函数理解
  18. MFP450 基础飞行平台问世,支持室内室外无GPS环境飞行
  19. Unity中的屏幕坐标:ComputeScreenPos/VPOS/WPOS
  20. Halide示例学习一

热门文章

  1. volatile与指针
  2. 如何构建自己的AI助理
  3. WPS Office AI实战:智能表格化身智能助理
  4. CString学习俏狐总结
  5. scanf()的用法总结
  6. 如何将SIP链路Message短信转为CDMA短信通过SIGTRAN链路发送
  7. 一些喜欢的歌词热评(网易云/酷狗/酷我/qq)
  8. Android 设计模式
  9. 准备蓝桥杯--dyx--特殊的数字
  10. .NET中的Math.Floor()和Math.Truncate()什么区别?