定位 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:单独占 ...
随机推荐
- /proc/interrupts 和 /proc/stat 查看中断的情况 （转载）
转自:http://blog.csdn.net/richardysteven/article/details/6064717 在/proc文件系统下,又两个文件提供了中断的信息. /proc/inte ...
- POJ1466/HDOJ1068 谈谈二分匹配的时间复杂度
题意: n个学生编号是0-n-1,然后给出他们这些人和一些人的关系. 要你找出最大的人数,要求这些人之间没关系. 咳咳,题目中没说性别的关系TVT 思路: 很明显是一个匹配算法,但是我们得搞出一个二分 ...
- spoj LCS2 - Longest Common Substring II && LCS - Longest Common Substring【SAM】
多串LCS很适合SA但是我要学SAM 对第一个串求SAM,然后把剩下的串在SAM上跑,也就是维护p和len,到一个点,如果有ch[p][c],就p=ch[p][c],len++,否则向fa找最下的有c ...
- pip查看安装包的可安装版本
不需要下载或者安装任何其他软件包,你可以指定一个高得离谱的版本号( 不可能有实际安装候选),并且可用的版本将被打印: pip install scrapy==122222 得到信息后指定版本就好了 p ...
- 最短路之Dijkstra(迪杰斯特拉)
一般用法: Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法是很有代 ...
- js封装xhr【重复造轮子】
仿jquery ajax,不过功能没那么多.贴代码 --------------------------------------分割线--------------------------------- ...
- Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses
Bryce1010模板 http://codeforces.com/contest/1000/problem/E 题意: 给一个无向图,求图的最长直径. 思路:对无向图缩点以后,求图的最长直径 #in ...
- 牛客练习赛25-A-因数个数和
题目描述 q次询问,每次给一个x,问1到x的因数个数的和. 输入描述: 第一行一个正整数q:接下来q行,每行一个正整数x 输出描述: 共q行,每行一个正整数表示答案 输入 4 1 2 3 10 输出 ...
- h5-21-文件操作-读取文件内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 504 Base 7 七进制数
给定一个整数,将其转化为7进制,并以字符串形式输出.示例 1:输入: 100输出: "202" 示例 2:输入: -7输出: "-10"注意: 输入范围是 [- ...