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. 条目四《用empty来代替检查size()是否为0》

    条目四<用empty来代替检查size()是否为0> 首先先说结论: empty()实现为内联函数.(众所周知, 优秀的内联函数的效率比一般函数是高的) 在stl标准库中,empty()对 ...

  2. 构建docker镜像

    一.通过docker commit命令构建镜像 docker commit 构建镜像可以想象为是将运行的镜像进行重命名另存一份.我们先创建一个容器,并在容器里做出修改,就像修改代码一样,最后再将修改提 ...

  3. 大佬的编码建议,让你的代码更pythonic

    大佬的编码建议,让你的代码更pythonic Raymond Hettinger是 Python 核心开发者,本文提到的许多特性都是他开发的. 若无例外,本文代码中出现的 colors names d ...

  4. 【算法笔记】B1018 锤子剪刀布

    1018 锤子剪刀布 (20 分) 大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. ...

  5. Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决

    Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决 http://blog.csdn.net/net_boy/archive/2009/11/05/477 ...

  6. UVA - 10817 状压DP

    题意:大白P95 本题比较特别的是状压两个集合并且进行转移,因此要分别处理当前集合只有1个老师/2个老师的记录(然后可O(1)得出0个老师的集合) 记忆化过了但是迭代式不能记忆超过2的之前的状态是怎样 ...

  7. Tyvj - 1305 单调队列优化dp

    今天有点头痛就不写具体细节了,贴完走人 #include<iostream> #include<algorithm> #include<cstdio> #inclu ...

  8. Oracle的pipelined函数实现高性能大数据处理

    从Oracle 8开始,我们就可以从一个collection类型的数据集合中查询出数据,这个集合称之为"虚拟表".它的方法是"SELECT FROM TABLE(CAST ...

  9. spark第十八篇:Tuning Spark 调优

    由于大多数Spark应用都是在内存中计算的,所以,Spark程序的瓶颈可能是集群中的任何资源,比如CPU,网络带宽或者内存等.本指南主要涵盖两个主题: 1.数据序列化.这对于良好的网络性能至关重要,还 ...

  10. lnmp 一键搭建脚本

    转载注明出处!!!!!!!!! 不足之处望多多指教. 不明之处站内私. #!/bin/bash #################################################### ...