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. Python数组(二)

    一.函数list 可将任何序列(如字符串)作为list的参数.list实际上是一个类,而不是函数. test=['java','C#','C','C++'] print(list(test)) ——& ...

  2. Deploy Flask app to Apache on Windows

    内容已过期,分割线以下为原文存档. 故事背景 这次我需要将一个Flask应用部署到本地的Windows服务器上.操作系统是64位的,程序是基于Python 3开发的,大体就是这样. 部署选项 根据Fl ...

  3. upsource代码审查

    upsource 从零搭建代码审查平台,需要的不仅是把代码审查的工具搭起来,还要结合公司情况制定一系列的代码审查规范.下面是对选择的upsource web端代码审查工具的安装及介绍.详细的请看这篇文 ...

  4. mysql id_logfile 日志

    ib_logfile 文件原理 ib_logfile0 是innodb中事务日志,记录系统的回滚,重做日志,记录的是文件的物理更改,存放位置my.ini 中的 datadir="D:\php ...

  5. POJ - 1011 剪枝练习

    题意:给定n条拆掉的棍子,问能凑成最短的多条相同长度棍子的最短长度 x:当前第几条正在合成的棍子 y:目前正在尝试的拆掉的棍子 z:当前长度 剪枝方案: 1.按照长度单调性排序,减少重复搜索 2.如果 ...

  6. [转] iOS开发者的Weex伪最佳实践指北

    [From] http://www.cocoachina.com/ios/20170601/19404.html 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享 ...

  7. golang flag

    本文主要对golang环境下命令行的解析进行了相关的总结.命令行在C下有getopt等函数, 在golang下提供了更为方便的处理方法. 1.命令行参数获取:命令行获得可通过os.Args参数, Ar ...

  8. linux下——java——new Font("Times New Roman", 0, 18)验证码图片变成字符

    j'ava部署到了tomcat,发现了一个问题,我们登录的验证码出现了乱码,和字符 然而在windows服务器上,或者说我们本地的开发环境上面,则没有这种现象, 这是为什么? 查看源码,发现有一段代码 ...

  9. 日志收集之filebeat

    一,软件介绍 Filebeat是一个轻量级日志传输Agent,可以将指定日志转发到Logstash.Elasticsearch.Kafka.Redis等中.Filebeat占用资源少,而且安装配置也比 ...

  10. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...