定位 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:单独占 ...
随机推荐
- SequoiaDB、SequoiaSQL、Cloudera Manager4.8.0、Cloudera CDH4.5 详细安装教程
1安装SequoaiDB集群 1.1配置信任关系 以root用户执行下面的操作 1 执行命令 ssh-keygen 然后一直回车确定即可 2 每台机器都打开id_rsa.pub文件 vi ~/.ssh ...
- （一）搭建自己的SpringBoot后台框架整合MyBatis
一:通过idea工具构建基础框架 1. 打开idea,左上角File→New→Project, 2. 点击Next 3. 点击Next,配置如下图,这里我们选择数据库MySQL和持久层框架MyB ...
- 删除一个ppa
https://itsfoss.com/how-to-remove-or-delete-ppas-quick-tip/ 总结如下: 1: 桌面删除,进入software & update,然后 ...
- js同过url下载文件，调用另存为弹框
实战中,项目将文件上传到项目的根目录下,并进行保存,随后根据此文件的路径进行下载到本地磁盘 实战中,项目将文件上传到项目的根目录下,并进行保存,随后根据此文件的路径进行下载到本地磁盘 实战中,项目将文 ...
- Hdu 2089 不要62 (数位dp入门题目)
题目链接: Hdu 2089 不要62 题目描述: 给一个区间 [L, R] ,问区间内不含有4和62的数字有多少个? 解题思路: 以前也做过这个题目,但是空间复杂度是n.如果数据范围太大就GG了.今 ...
- Codeforces Round #395 (Div. 2) B
Description Young Timofey has a birthday today! He got kit of n cubes as a birthday present from his ...
- 洛谷 P4317 花神的数论题 || bzoj3209
https://www.lydsy.com/JudgeOnline/problem.php?id=3209 https://www.luogu.org/problemnew/show/P4317 设c ...
- Maxim Buys an Apartment CodeForces - 854B
题意:已知一条街上有n幢房子,依次的编号为1~n,其中有k幢已经卖出去了但是不知道是哪k幢.当且仅当一幢房子没有卖出去且其两旁至少有一幢房子卖出去了的时候,认为这幢房子是好的.问这n幢房子中好的房子最 ...
- 洛谷 P1199 三国游戏
参考:Solution_ID:17 题解 更新时间: 2016-11-13 21:01 这道题要求最后得到的两方的默契值最大的武将,小涵的默契值大于计算机,首先,我们这个解法获胜的思路是,每个武将对应 ...
- Java开发笔记（九十四）文件通道的性能优势
前面介绍了字节缓存的一堆概念,可能有的朋友还来不及消化,虽然文件通道的用法比起传统I/O有所简化,可是平白多了个操控繁琐的字节缓存,分明比较传统I/O更加复杂了.尽管字节缓存享有缓存方面的性能优势,但 ...