问题:

  relative 和 absolute 之间的关系是什么?有什么区别?

那,答案呢?

  relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置relative 属性前的位置与空间,其中背景图和图片其他内容显示在页面最上层,占用自己原本位置空间,不挤占其他html快的空间

  absolute  绝对定位,一直往上级找relative属性,不找同级,找到含有relative的标签进行定位,没找到相对body定位,释放原本占用的位置空间,从侧面看,相当于把这块有absolute 属性的内容从html平面中抽出来放在html平面的上面

  两者都有left 和 top属性, 只是两者的参照原点不同,但是坐标原点都在左上角

  一般这两个联合使用,相对定位不改变位置并固定的内容大小,不随屏幕的更改而改变,让absolute定位其中,或者单独absolute定位全窗口导航信息,比如返回顶面,QQ 电话等联系方式链接

那,既然清楚了这两个定位概念,实现一个绝对放屏幕居中?

  1. 定义一个容器包裹这快内容

  2. 使用absolute,相对body进行定位, 宽高占用50%

  3. 通过 transform 属性把定位坐标移到屏幕中央

.box-break {
width: 1600px ;
background-color: orange;
padding: 50px;
margin: 0;
border: solid 2px red;
/*position 绝对定位,一直往上级找relative属性,不找同级,找到相对relative定位,没找到相对body定位,并且还有个属性,并不占用html本来空间*/
position: absolute;
left: 50%;
top: 50%;
/*通过transform把屏幕上坐标点移到屏幕中心*/
transform: translate(-50%, -50%);
} body {
/*让其body内容定窗口显示*/
margin: 0;
padding: 0;
background: url("../img/girl.jpg");
background-size: 100%;
}

  

relative 和 absolute 定位关系的更多相关文章

  1. 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

  2. 510,position的值,relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  3. 自制简单表单验证relative与absolute定位

    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...

  4. Relative 定位与Absolute 定位实例

    一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...

  5. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  6. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  7. display值的作用分别是什么?relative和absolute分别是相对谁定位的?

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  8. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  9. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

随机推荐

  1. ul li内的文字水平居中显示

    head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...

  2. Go同步和异步执行多个任务封装

    同步执行类RunnerAsync 支持返回超时检测,系统中断检测 错误常量定义 //超时错误 var ErrTimeout = errors.New("received timeout&qu ...

  3. vscode 开发工具

    做开发两年了,而我记忆力不太好,所以写代码得靠强大的编辑器提示. 陆陆续续使用了如 notepad++.dreamweaver.sublime text.webstorm.phpstorm.Atom等 ...

  4. Mybatis中常用的SQL

    1.BaseResultMap <resultMap id="BaseResultMap" type="com.stylefeng.guns.common.pers ...

  5. 使用Anaconda搭建TensorFlow-GPU环境

    前言: 对于深度学习来说,各种框架torch,caffe,keras,mxnet,tensorflow,pandapanda环境要求各一,如果我们在一台服务器上部署了较多的这样的框架,那么各种莫名的冲 ...

  6. 线程池的使用及ThreadPoolExecutor的分析(一)

    说明:本作者是文章的原创作者,转载请注明出处:本文地址:http://www.cnblogs.com/qm-article/p/7821602.html 一.线程池的介绍 在开发中,频繁的创建和销毁一 ...

  7. bzoj:1776: [Usaco2010 Hol]cowpol 奶牛政坛

    Description 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向道路,用各种各样的方法连接这些草地.而且从每片 ...

  8. [bzoj1969] [Ahoi2005]LANE 航线规划

    tarjan.并查集.树状数组.树链剖分. 时间倒流,变删边为加边. 先求一波边双联通分量,缩点. 题目保证最后还是整张图联通的..所以就是一棵树. 现在的操作就是,将路径上的边权置0(加边时),查询 ...

  9. cf_514C(字符串哈希)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=121897#problem/G Watto and Mechanism Time ...

  10. [国嵌笔记][021-022][ARM处理器工作模式]

    [ARM处理器工作模式] 处理器工作模式 1.User(urs):用户模式,linux应用程序运行在用户模式 2.FIQ(fiq):快速中断模式 3.IRQ(irq):中断模式 4.Superviso ...