定位 absolute和relative比较
absolute:脱离原来位置定位.是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对文档进行定位
relative:保留原来位置进行定位,相对于自己原来的位置进行定位
下面举两个例子
1.
<style>
*{
margin:0;
padding:0;
}
.box1{
width:100px;
height:100px;
background-color:#000;
position:absolute; }
.box2{
width:150px;
height:150px;
background-color:red;
opacity:0.6;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
box1:position:absolute,脱离了原来位置定位,box2就移上去了
2
.box1{
width:100px;
height:100px;
background-color:#000;
position:relative;
}
.box2{
width:150px;
height:150px;
background-color:red;
opacity:0.6;
}
box1,position:relative,是保留了原来位置定位,所以box2没有移上去;
那么,什么时候使用absolute,什么时候使用relative?
定位的时候,我们最好先选择参照物,
一般我们用relative作为参照物,而使用absolute来进行定位;
在我们给一个元素设置上position:relative,不设置left,top,right,bottom值,虽然看起来是对这个元素没有什么影响,但是它保留了自己原来的位置,这对后续元素没有什么影响;
absolute:可以任意地调整自己的参照物,更加灵活,所以一般都用于定位
position还有一个值:fixed fixed定位是相对于视口的定位，我们在网页上都见过左右两边不随着滚轮滚动而改变位置的广告栏，这种广告栏就是用fixed定位的。
定位 absolute和relative比较的更多相关文章
- Position属性四个值：static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- css absolute与relative的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Div CSS absolute与relative的区别小结
absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...
- absolute和relative的几个Demo
这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="h ...
- position属性absolute和relative理解
relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- position的absolute与fixed，absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- focus、click、blur、display、float、border、absolute、relative、fixed
onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...
随机推荐
- C# 中==和Equal的区别
http://new-fighter.iteye.com/blog/1634800 今天突然看到一种情况,颠覆了我对这比较使用方法的判断. 于是开始在网上找资料,但几乎都是Java的,好不容易找到一个 ...
- bzoj 4407: 于神之怒加强版【莫比乌斯反演+线性筛】
看着就像反演,所以先推式子(默认n<m): \[ \sum_{d=1}^{n}d^k\sum_{i=1}^n\sum_{j=1}^m[gcd(i,j)==d] \] \[ =\sum_{d=1} ...
- bzoj 2460: [BeiJing2011]元素【线性基+贪心】
先按魔力值从大到小排序,然后从大到小插入线性基中,如果插入成功就加上这个魔力值 因为线性基里是没有异或和为0的集合的,所以正确性显然,然后最优性,考虑放进去一个原来没选的,这样为了可行性就要删掉一个, ...
- IT兄弟连 JavaWeb教程 转发和重定向的区别
转发是在服务器端完成的:而重定向是在客户端完成的. 转发的速度快:而重定向的速度慢. 转发的是同一次请求:而重定向是两次不同的请求. 转发不会执行转发后的代码:而重定向会执行重定向后的代码. 转发地址 ...
- C. Coconut（2017 ACM-ICPC 亚洲区（乌鲁木齐赛区）网络赛）
额,只是一道签到题,emmm直接代码: #include <cstdio> #include <cstring> #include <algorithm> usin ...
- 洛谷1083（差分+二分 or 线段树）
第一种方法:可以二分最大天数订单的答案然后通过差分求一下是否可行. ; int n, m, a[maxn], ans; struct section { int cnt, l, r; }b[maxn] ...
- [NOIP2018校模拟赛]T1聚会 party
题目链接: 聚会 分析: 设每个点到1号点的距离为dist_{i},每个点的权值为x_{i},目标点到1号点的距离为dist,权值为x,那么对于每一次查询,我们讨论三种情况: ① 目标家庭在区间左边( ...
- 关于itchat用法的一篇博文
itchat的原理就是利用爬虫爬取了网页版微信的内容,并进行一系列的操作,运用微信,通过手机与电脑时登录的互通性,可以实现用微信对电脑的操作,通过itchat.msg_register方法,可以得到目 ...
- nginx缓存配置及开启gzip压缩
阅读目录 一:nginx缓存配置 二:nginx开启gzip 回到顶部 一:nginx缓存配置 在前一篇文章,我们理解过http缓存相关的知识点, 请看这篇文章. 今天我们来学习下使用nginx服务来 ...
- vs直接IP访问运行项目
找到IIS Express 正在运行的项目应用程序,点击网站,会出现配置路径,找到配置路径,显示隐藏的文件夹 localhost替换成本地IP,重新运行项目,然后就可以直接通过IP访问项目,好处就是便 ...