ralitive absolute
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。
详文参考:http://www.csschina.net/a/jc/css_709.html
【编辑推荐】
- 解读CSS中absolute与relative的区别和联系
- CSS 绝对定位属性absolute用法初探
- DIV CSS建站对浏览器兼容性和注意事项
- CSS2.0中page-break-after属性用法
- 解读DIV CSS网页布局中CSS无效十个原因
第 1 页:position属性值定义 | 第 2 页:relative与absolute的主要区别 |

ralitive absolute的更多相关文章
- 5-5 可视化库Seaborn-多变量分析绘图
Parameters:¶ 参数 解释 变量 x,y,hue 数据集变量 变量名 date 数据集 数据集名 row,col 更多分类变量进行平铺显示 变量名 col_wrap 每行的最高平铺数 整 ...
- “fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- Position属性四个值:static、fixed、relative、absolute的区别和用法
1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...
- [LeetCode] Longest Absolute File Path 最长的绝对文件路径
Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- ie a absolute bug
给a设置position:absolute时,在IE下,尽管display:block;width:100%;height:100%,依然无法点击.但是加一个背景颜色就可以了.如果不需要背景,再把背景 ...
- 辨析relative与absolute
谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保 ...
随机推荐
- DownloadManager 的使用
一.基本概念 1.DownloadManager是Android 2.3A (API level 9) 引入的,基于http协议,用于处理长时间下载. 2.DownloadManager对于断点 ...
- Android项目实战(十):自定义倒计时的TextView
项目总结 -------------------------------------------------------------------------------------------- 有这 ...
- C++ RTTI
一.定义:RTTI:Run Time Type Identification ,运行时类型识别:指程序能够使用基类的指针或引用来检索其所指对象的实际派生类型.二.使用方式:C++中有两个操作符提供RT ...
- cell自适应高度
MyModel.h #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface MyModel : ...
- IOS SDWebImage实现原理详解
在之前我写过SDWebImage的使用方法,主要是用与获取网络图片,没有看过的朋友可以看看. 这篇文章将主要介绍SDWebImage的实现原理,主要针对于获取网络图片的原理,如果没有第三方我们该怎么去 ...
- 去除UITableView中多余的分割线或者隐藏cell间的分割线
一:去除tableView多余的分割线 首先,自定义一个方法 -(void)setExtraCellLineHidden: (UITableView *)tableView{ UIView *v ...
- 提示“正尝试安装的adobe flash player不是最新版本”的解决方法
尼玛,今天下午遇到一个比较奇怪的现象,我电脑的flash的不能正常使用了,我下载了一个重新安装了下,但还是不行.然后我又卸载了,重新安装flash,重启电脑,还是不行...而且在安装flash pla ...
- Java 网络编程----基本概念
网络现在是一个非常普遍的概念. 以下是维基百科上的解释: 网络一词有多种意义,可解作: 网络流也简称为网络(network).一般用于管道系统.交通系统.通讯系统建模. 有时特指计算机网络. 或特指其 ...
- 转 Android Dalvik虚拟机初识
首先,让我们来思考下面几个问题: 什么是Dalvik虚拟机? Dalvik VM与JVM有什么区别? Dalvik VM有什么新的特点? Dalvik VM的架构是怎么样的? 首先,我得承认第一个问题 ...
- Buffer篇
// var buf1 = new Buffer(26);/*返回一个新的buffer对象,这个新buffer和老buffer公用一个内存.但是被start和end索引偏移缩减了.(比如,一个buff ...