版权声明：本文为博主原创文章。未经博主同意不得转载。 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. plsql 查询到别的用户下面的表

    原因:勾选了"Allow multiple connections" 解决方法:打开"Tools"下面的"Perference",里面有个& ...

  2. curl 远程下载图片

    <?php echo httpcopy("http://www.baidu.com/img/baidu_sylogo1.gif"); function httpcopy($u ...

  3. shell常用的判断条件

    .判断文件夹是否存在 if [ -d /home/q/www ];then echo "true"; else echo "false" ;fi (系统内存在文 ...

  4. SQLite学习手册(转)

    原文网址:http://www.cnblogs.com/stephen-liu74/archive/2012/01/22/2328757.html 在实际的应用中,SQLite作为目前最为流行的开源嵌 ...

  5. 解密.net

    一直疑惑与几个专业的名词,今天好不easy看完了.net视频,能够好好总结一下了. 一.关于.net中的几个概念 ①..NET Framework用来保证应用程序的安全的.详细的百度上有解说. wat ...

  6. 木马suppoie 处理的几个思路 木马文件的权限所有者 属主数组 定时任务 目录权限

    木马suppoie 处理的几个思路  木马文件的权限所有者  属主数组  定时任务   目录权限

  7. mean 快速开发和现有技术的对比分析

    最近无聊的时候,网上看了下全栈开发的相关资料,发现了mean这个好玩的东西.可能我是一个比较传统的开发,接触.net 已经将近快8年了,一直在传统的后端多层架构的模式下开发,一时对这个新的东西就喜欢研 ...

  8. html 简单的预缓存

    切图生成html,加鼠标响应,预缓存 <style> .d4{ width:190; height:170; background-image: url(images/未标题-1_09-1 ...

  9. MFC中CString转换成char数组的问题

    由于结构体中用到联合体(联合体需要确定分配内存分配大小)或其它因素,需要用char数组来保存字符串,但是在MFC中一般都是用CString来存放字条串.关于它们之间的转换,在VS2008中有时会出现异 ...

  10. .net mvc 下实现移动架构display mode

    最近要求做支持移动端网站 我们的设计已经把移动端UI给我了,但是我还没想好改用哪种方式支持移动端 1.常见的就是2级域名m.baidu.com,框架根据访问者设备,来选择是否跳转到移动站 2.同域名的 ...