position

absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠

relative相对于初始位置来进行移动

fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器的同一个位置

sticky粘性定位,该定位基于用户滚动的位置。页面滚动超出目标区域之前,表现和 position:relative;一样 ,页面滚动超出目标区域时,表现和position:fixed;一样

position: absolute;
 top: 50%;
 left:50%;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);

当使用:

position: absolute;

 top: 50%;
 left:50%;

元素左上角处于中心位置

translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,

元素中心处于中心位置

下面的有图片来清晰解释

这是只有

position: absolute;

 top: 50%;
 left:50%;

这是加了

translate(-50%,-50%)

html+css定位篇的更多相关文章

  1. css定位篇

    1.浮动的特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中:margin:0 a ...

  2. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  3. 第八篇 CSS定位

    CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么.   在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...

  4. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  5. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  6. selenium之css定位小结

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  7. Selenium CSS定位语法

    大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位 ...

  8. 自动化测试-6.selenium的css定位

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  9. 2.4 CSS定位

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

随机推荐

  1. win7下钩子失效解决方案

    win7键盘钩子失效解决方法:1.win开始右键+r(运行) 2.将其输入regedit.exe(注册表管理器),回车打开注册表管理器 3.进入HKEY_LOCAL_MACHINE4.进入到SYS ...

  2. JDBC_批处理Batch_插入2万条数据的测试

    批处理   Batch 对于大量的批处理,建议使用Statement,因为PreparedStatement的预编译空间有限,当数据特别大时,会发生异常. import java.sql.Connec ...

  3. HMTL5 本地数据库

    数据库这个东东现在也可以用在web上了,目前为止, chrom 6 以上版本,opera 10 以上,safari 5以上支持这个功能. htm4中数据库只能放在服务器,只能通过服务器来访问,但是在h ...

  4. Qt 学习之路 2(50):自定义可编辑模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(50):自定义可编辑模型 Qt 学习之路 2(50):自定义可编辑模型 豆子 2013年5月13日 Qt 学习之路 2 13条评论 上一章我们 ...

  5. Linux环境查看系统参数

    一.查看CPU信息 lscpu cat /proc/cpuinfo   二.查看CPU位数 getconf LONG_BIT   三.查看MEM信息 free free -m cat /proc/me ...

  6. SSH 项目建立过程

    1. 加入 Spring 1). 加入 jar 包 2). 配置 web.xml 文件 <context-param> <param-name>contextConfigLoc ...

  7. 代理ip的使用以及多进程爬取

    一.代理皮的简单使用 简单的看一二例子即可 import requests #代理ip 高频的ip容易被封,所以使用ip代理 #免费代理 ip:www.goubanjia.com 快代理 西祠代理 h ...

  8. Android 自动分析apk加固方式

    本实例只对apk中lib文件夹中的文件进行分析import java.io.File;import java.io.IOException;import java.util.ArrayList;imp ...

  9. WEB图表制作

    https://www.hcharts.cn/demo/highcharts/column-drilldown

  10. 第三次 Scrum Meeting

    第三次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/7 20:00 60min 新主楼G411 附Github仓库:WEDO 例会照片 工作情况总结(4.5-4. ...