版权声明：本文为博主原创文章。未经博主同意不得转载。 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. JS继承的6种方法

    1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法. 构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原 ...

  2. Python 中 global、nonlocal的使用

    1.在学习python过程中很重要的一点需要记住:如果在函数内部定义了跟全局变量同名的变量,那么该变量将是局部变量,而全局变量的引用在该函数范围内将失效. x = 9 def a(): x = 10 ...

  3. mongodb数据库安装与卸载

    此处以centos下monggodb3.4版本安装为例,可参考官网安装教程 步骤如下: 1.配置mongodb ym源 vi /etc/yum.repos.d/mongodb-org-3.4.repo ...

  4. InnoDB: auto-extending data file ./ibdata1 is of a different size 640 pages (rounded down to MB) than specified in the .cnf file: initial 768 pages, max 0 (relevant if non-zero) pages!

    问题描述: centos 安装MySQL $yum install mysql-server 安装之后执行命令mysql 报错: 查看mysql的启动日志: [ERROR] InnoDB: auto- ...

  5. Docker：通过Git部署

    这是我翻译的国外博客,如需转载请注明出处和原文链接 我一直听说Docker是个很棒的新事物,但是我一直提不起兴趣,直到我遇到一个切实的问题: 如果通过Docker来部署 Scout ,这么做会轻松一些 ...

  6. Java语言中两种异常的差别

    Java提供了两类主要的异常:runtime exception和checked exception.所有的checked exception是从java.lang.Exception类衍生出来的,而 ...

  7. openwrt U盘启动

    参考链接: http://m.blog.csdn.net/blog/zcynical/44892785

  8. 【Python】GUI 练习1--利率计算器

    import sys from PyQt4.QtCore import * from PyQt4.QtGui import * class Form(QDialog): def __init__(se ...

  9. Material design之Views and Shadows

    Views and Shadows: elevation是构成控件阴影的基本属性.通过设置较高的Z值可以接受更大的阴影,阴影只能投射到Z=0的平面上. View Elevation 控件的Z值,是由两 ...

  10. point-position目标定位

    双站探测同一目标会构成两条直线:(飞行目标定位2 - ostartech - 博客园 https://www.cnblogs.com/wxl845235800/p/8858116.html) 测角偏差 ...