版权声明：本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/wangshuxuncom/article/details/30982863

        在博客《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>
图01

        说明：上面的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>
图02

        说明：上面的son1父元素加入了样式padding-left并设置其值为50px；

        总结：对照图01和图02我们会发现这样的情况下son1并没有受padding-left的影响。据此我们能够认定父元素纵使设置了padding样式，absolute作用的子元素也是从父元素的左上角開始定位。

        【0分下载演示资源】

         【參见还有一篇博客——position学习终结者(一)】

position学习终结者(二)的更多相关文章

  1. Java IO学习笔记二：DirectByteBuffer与HeapByteBuffer

    作者:Grey 原文地址:Java IO学习笔记二:DirectByteBuffer与HeapByteBuffer ByteBuffer.allocate()与ByteBuffer.allocateD ...

  2. crawler4j 学习（二）

    crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...

  3. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  4. Android Animation学习（二） ApiDemos解析：基本Animators使用

    Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...

  5. AspectJ基础学习之二搭建环境（转载）

    AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...

  6. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. MyBatis学习系列二——增删改查

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...

  9. MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存

    目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...

随机推荐

  1. 个人的Linux实用命令

    Linux下的命令有那么多,我不可能也不想去把每一个都记住,列举一些自己工作中很实用的命令,这些命令或许不是很常用,但是有时候却离不了. 1.网络方面 service iptables start/s ...

  2. ImageTag小案例

    其实不使用ImageIO,就是用一般的BufferedOutputStream+byte[] buffer也可以 关键在于通过response设置页面的MIME Type,自行Google~~~ 源代 ...

  3. yii2 RESTful API 405 Method Not Allowed

    关于 Yii2 中 RESTful API 的开发,可以参考另一篇随笔 http://www.cnblogs.com/ganiks/p/yii2-restful-api-dev.html 测试的过程中 ...

  4. ZoneDateTime 转换Date

    final ZonedDateTime now = ZonedDateTime.now(); //当前时间final ZonedDateTime todayZero = now.truncatedTo ...

  5. 反向传播BackPropagation

    http://www.cnblogs.com/charlotte77/p/5629865.html http://www.cnblogs.com/daniel-D/archive/2013/06/03 ...

  6. sudo -E的意思

    1.sudo -E -E选项在man page中的解释是: -E The -E (preserve environment) option indicates to the security poli ...

  7. socket文件权限变更引起crs无法启动故障

    Crs无法正常启动,也无法关闭.[root@rac101 ~]# crsctl stop crsStopping resources. This could take several minutes. ...

  8. [Hadoop]安装

    1 从官网下载hadoop稳定版 http://www.apache.org/dyn/closer.cgi/hadoop/common/ 2 安装JAVA 参考如下blog http://www.cn ...

  9. poj 3281(网络流+拆点)

    题目链接:http://poj.org/problem?id=3281 思路:设一个超级源点和一个超级汇点,源点与食物相连,饮料与汇点相连,然后就是对牛进行拆点,一边喜欢的食物相连,一边与喜欢的饮料相 ...

  10. Python 实现购物商城，含有用户入口和商家入口

    这是模拟淘宝的一个简易的购物商城程序. 用户入口具有以下功能: 登录认证 可以锁定用户 密码输入次数大于3次,锁定用户名 连续三次输错用户名退出程序 可以选择直接购买,也可以选择加入购物车 用户使用支 ...