relative 和 absolute 定位关系
问题:
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 定位关系的更多相关文章
- 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- 510,position的值,relative和absolute定位原点是
(absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed ...
- 自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
- Relative 定位与Absolute 定位实例
一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...
- CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- CSS 相对|绝对(relative/absolute)定位系列(一)
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- div定位relative和absolute测试1
div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...
- div定位relative和absolute测试2
之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...
随机推荐
- ul li内的文字水平居中显示
head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...
- Go同步和异步执行多个任务封装
同步执行类RunnerAsync 支持返回超时检测,系统中断检测 错误常量定义 //超时错误 var ErrTimeout = errors.New("received timeout&qu ...
- vscode 开发工具
做开发两年了,而我记忆力不太好,所以写代码得靠强大的编辑器提示. 陆陆续续使用了如 notepad++.dreamweaver.sublime text.webstorm.phpstorm.Atom等 ...
- Mybatis中常用的SQL
1.BaseResultMap <resultMap id="BaseResultMap" type="com.stylefeng.guns.common.pers ...
- 使用Anaconda搭建TensorFlow-GPU环境
前言: 对于深度学习来说,各种框架torch,caffe,keras,mxnet,tensorflow,pandapanda环境要求各一,如果我们在一台服务器上部署了较多的这样的框架,那么各种莫名的冲 ...
- 线程池的使用及ThreadPoolExecutor的分析(一)
说明:本作者是文章的原创作者,转载请注明出处:本文地址:http://www.cnblogs.com/qm-article/p/7821602.html 一.线程池的介绍 在开发中,频繁的创建和销毁一 ...
- bzoj:1776: [Usaco2010 Hol]cowpol 奶牛政坛
Description 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向道路,用各种各样的方法连接这些草地.而且从每片 ...
- [bzoj1969] [Ahoi2005]LANE 航线规划
tarjan.并查集.树状数组.树链剖分. 时间倒流,变删边为加边. 先求一波边双联通分量,缩点. 题目保证最后还是整张图联通的..所以就是一棵树. 现在的操作就是,将路径上的边权置0(加边时),查询 ...
- cf_514C(字符串哈希)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=121897#problem/G Watto and Mechanism Time ...
- [国嵌笔记][021-022][ARM处理器工作模式]
[ARM处理器工作模式] 处理器工作模式 1.User(urs):用户模式,linux应用程序运行在用户模式 2.FIQ(fiq):快速中断模式 3.IRQ(irq):中断模式 4.Superviso ...