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参数 多参数的实 ...
随机推荐
- Makefile 13——理解make的解析行为
make是以从上到下的顺序读入Makefile中的内容的.然而,处理Makefile中的语句却并非完全从上到下. 大体上,make处理一个Makefile分为两个阶段.第一个阶段包含: 1.make读 ...
- PHP学习笔记（15）PDO数据库操作+AJAX无刷新技术删除用户
pdo.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- SQLi-Labs学习笔记
结构化查询语言,也叫做SQL,从根本上说是一种处理数据库的编程语言.对于初学者,数据库仅仅是在客户端和服务端进行数据存储.SQL通过结构化查询,关系,面向对象编程等等来管理数据库.编程极客们总是搞出许 ...
- logback.xml
<?xml version="1.0" encoding="UTF-8" ?> <configuration> <!-- 日志存放 ...
- List、Set、Map集合大杂烩
java集合主要分三种:list.set.map:当中list和set都继承自Collection接口,两者最大差别是set不能包括反复元素 list的经常使用实现类有: ArrayList:大小可变 ...
- java部署ubuntu后中文显示问号问题
1.首先先回忆自身项目的编码格式,即在本地进行编码时使用的编码格式.UTF-82.检测tomcat的设置问题,在web.xml和server中的设置:server.xml中: <Connecto ...
- python socket 简单例子
myserver.py: import socket serversocket = socket.socket(socket.AF_INET, socket.SOCK_STREAM) serverso ...
- 如何用MathType编辑这三个符号
MathType是一款专门的公式编辑器,用来编辑数学物理等公式,很多期刊杂志的排版都会用到它.用MathType编辑公式的时候,完全不用考虑学习和上手的过程,打开就可以编辑出你的公式,所以这个工具对于 ...
- 用MathType编辑反三角函数的方法
在使用文档写数学类的文章时候,常常会涉及到一些数学公式,由于数学公式中包含了很多的数学符号,如果使用文档自带的公式编辑器往往会发现很多的符号都不全或者不符合自己的要求.这个时候就需要一款专业的数学公式 ...
- Xcode The operation couldn’t be completed. (NSURLErrorDomain error -1012.)
使用Xcode SVN 出现问题 The operation couldn’t be completed. (NSURLErrorDomain error -1012.) 解决方法: 打开终端 然后输 ...