position relative和absolute区别
看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html
总的来说 这两个属性都是通过增加left和right偏离原来的位置 但是relative仍然保留了原先位置的占位 但是absolute没有 原先位置不占位其他元素会补上
最主要的区别 看原文这句话
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位
意思就是说 absolute的移动 是基于 含有relative OR absolute 属性的父元素
在看到原文这句话 如果红色背景层定位为absolute,则情形如图4:
红色的直接父元素是绿色的static 该元素没有absolute OR relative 属性 在往上一级 黄色的DIV是离红色元素最亲近的含有 absolute OR relative 的父元素
因此 top left 等属性值是在黄色DIV基础上偏移的
position relative和absolute区别的更多相关文章
- css position: relative,absolute具体解释
关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...
- position 属性值:relative 与 absolute 区别
absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别?
position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...
- position:relative/static/fixed/absolute定位的区别以及使用场景
absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
随机推荐
- HDU 5875 Function(ST表+二分)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5875 [题目大意] 给出一个数列,同时给出多个询问,每个询问给出一个区间,要求算出区间从左边开始不 ...
- BZOJ 3498 PA2009 Cakes(三元环处理)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3498 [题目大意] N个点m条边,每个点有一个点权a. 对于任意一个三元环(j,j,k ...
- Linux系统编程——进程调度浅析
概述 操作系统要实现多进程.进程调度不可缺少. 有人说,进程调度是操作系统中最为重要的一个部分.我认为这样的说法说得太绝对了一点,就像非常多人动辄就说"某某函数比某某函数效率高XX倍&quo ...
- java final 关键字醍醐灌顶
醍醐灌顶: final 关键字,它可以修饰数据 .方法.类. 可能有些同学傻傻分不清出,这里可以快速弄懂final; final 实例域: 可以将实例域定义为final,构建对象时必须初始化这样的域, ...
- 关于windows服务的操作
/// <summary> /// 判断是否安装了某个服务 /// </summary> /// <param name="serviceName"& ...
- SMACSS:一个关于CSS的最佳实践-3.Layout Rules
本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...
- 在不同Activity之间传递数据的四种常用方法
在Android中传递数据的方法非常多,本次介绍4中比较常用的数据传递方法: 1.通过Intent传递数据 2.通过静态变量(static)传递数据 3.通过剪贴板(Clipboard)传递数据 4. ...
- PHP-购物网站开发设计(一)
2015-07-6 开始使用PHP完成简单购物网站的设计,首先要选择合适的软件平台,所以今天先记录平台的选择与搭建: 我选择使用Apache24 + PHP 5.6 + MySQL 开发环境完成PHP ...
- [Swust OJ 409]--小鼠迷宫问题(BFS+记忆化搜索)
题目链接:http://acm.swust.edu.cn/problem/409/ Time limit(ms): 1000 Memory limit(kb): 65535 Description ...
- javascript实现的功能--二级联动
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" ...