position学习终结者(二)
在博客《position学习终结者(一)》中我们认识到假设某一absolute作用的元素的父对象(或曾祖父，仅仅要是父级对象)设置了position属性且position的属性值为absolute、relative或者fixed，那么这个子元素会參照离它（指子元素）近期的且position的属性值为absolute、relative或者fixed的父元素进行定位。子元素的定位点为父元素的左上角，学习过padding的人可能会这样想：这个时候假设父元素设置了padding样式，那absolute作用的子元素应该从padding处開始定位吧？呵呵呵。这样的认识对吗，先參见以下的样例：
代码01：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
position:absolute;
margin-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：上面的son1父元素没有使用padding样式，这时son1定位点为父元素的左上角；
代码02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
position:absolute;
margin-left:50px;
padding-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：上面的son1父元素加入了样式padding-left并设置其值为50px；
总结：对照图01和图02我们会发现这样的情况下son1并没有受padding-left的影响。据此我们能够认定父元素纵使设置了padding样式，absolute作用的子元素也是从父元素的左上角開始定位。
【0分下载演示资源】
【參见还有一篇博客——position学习终结者(一)】
position学习终结者(二)的更多相关文章
- Java IO学习笔记二：DirectByteBuffer与HeapByteBuffer
作者:Grey 原文地址:Java IO学习笔记二:DirectByteBuffer与HeapByteBuffer ByteBuffer.allocate()与ByteBuffer.allocateD ...
- crawler4j 学习（二）
crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- Android Animation学习（二） ApiDemos解析：基本Animators使用
Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...
- AspectJ基础学习之二搭建环境（转载）
AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- MyBatis学习系列二——增删改查
目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
- MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存
目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...
随机推荐
- 亚信UED前端流程自动化构建工具
亚信UED前端流程自动化构建工具 .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-h ...
- 老司机的应用级监控——spring?actuator
http://mt.sohu.com/20160824/n465783118.shtml ************************************************ 1什么是sp ...
- CCNA2.0笔记_子网划分
http://files.cnblogs.com/files/airoot/%E5%AD%90%E7%BD%91%E5%88%92%E5%88%86.zip 网络 默认子网掩码 A类 255.0.0. ...
- 设置MATLAB中Current Folder的默认文件夹（转载）
设置MATLAB中Current Folder的默认文件夹 在我们使用MATLAB的过程中,其Current Folder面板会给我们带来一定的便利性.但遗憾的是,MATLAB自身没有提供友好的设置界 ...
- Unix系统编程（）lseek系统调用
之前知道lseek这个系统调用可以改变文件的偏移量,或者叫偏移量或指针. 文件偏移量是指执行下一个read或者write操作的文件起始位置,会以相对于文件头部起始点的文件当前位置来表示. 除非指定了O ...
- Java与.NET机制比较分析
一.概述 不管是什么语言开发的web应用程序,都是在解决一个问题,那就是用户输入url怎么把对应的页面响应出来,如何通过url映射到响应的类,由于自己做asp.net的时间也不短了,还算是对asp.n ...
- Oracle安装完成后,如何用命令行启动和关闭数据库?
Oracle安装完成后,如何用命令行启动和关闭数据库? 解答: 打开:STARTUP [FORCE] [RESTRICT] [PFILE= filename] [OPEN [RECOVER][ dat ...
- GZipStream
命名空间: System.IO.Compression 说明: 此类表示 GZip 数据格式,它使用无损压缩和解压缩文件的行业标准算法.这种格式包括一个检测数据损坏的循环冗余校验值.GZip 数据格式 ...
- Openstack(Kilo)安装系列之Keystone（四）
创建租间.用户.角色 一.To configure prerequisites 1.Configure the authentication token: export OS_TOKEN=ADMIN_ ...
- Yii2 选择布局的方式
方案1:控制器内成员变量 public $layout = false; //不使用布局 public $layout = "main"; //设置使用的布局文件 方案2:控制器成 ...