理解绝对定位和相对定位布局（5）
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
<div ———————————-不是参照物
<div—————————–不是参照物
<div———————–position:relative; 参照物
<div box1
<div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
<div box3
效果图：
图11
b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
<div ———————————-不是参照物
<div—————————–不是参照物
<div———————–position:relative; 参照物
<div box1
<div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
<div box3
效果图：
图12
总结：
相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。
0
投稿猜你喜欢
- 这篇文章主要介绍了Python enumerate函数遍历数据对象组合过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定
这样做的好处是：利用表格来装载数据，不言而喻是最好的，你可以很灵活的为每个单元格定义样式。下面是具体的做法首先在photoshop设计一个效- Fabric是一个用Python开发的部署工具，最大特点是不用登录远程服务器，在本地运行远程命令，几行Python脚本就可以轻松部署。文档入
- 在日常Java后端开发过程中，免不了对数据字段的解析，自然就少不了对字符串的操作，这其中就包含了正则表达式这一块的内容，这里面涉及Java包
- stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符。start必需。一个非负的
- ChromeDriver 是 google 为网站开发人员提供的自动化测试接口，它是 selenium2 和 chrome浏览器 进行通信的
- python开发中经常遇到报错的情况，但是warning通常并不影响程序的运行，而且有时特别讨厌，下面我们来说下如何忽略warning错误。
- 1.比喻 如同Windows用桌面、文件夹、垃圾筒来比喻计算机的*作，Web的设计也是如此。善于利用明确、抽象或概念化的比喻ICON来表达各
- 基本介绍pandas是Python数据挖掘、数据分析中常用的库。而DataFrame生成excel中的sheet表，以及在excel中增加s
- 数组编程使用Numpy数组可以使你利用简单的数组表达式完成多项数据操作任务，而不需要编写大量的循环，这个极大的帮助了我们高效的解决问题。我们
- 下面先来看看例子：table表字段1 字段2 i
- 为庆祝jQuery的四周年生日，jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中，jQuery官方团队做了大量的编码、测
- 支持实时监控sliderbar的数据，允许有callback回调的函数，有示例1、可自定样式SetStyle() 2、带有onSroll功能
- 简介PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库PyMySQL 遵循 Python 数据库 API
- 我们使用tp或者yii2的时候，会将网站的前台和后台按照模块分组。yii2的高级模板已经帮我们划分好了，tp系列框架需要自己配置分组。那么l
- python 的语法定义和C++、matlab、java 还是很有区别的。1. 括号与函数调用def devided_3(x):
- //图片上传<SCRIPT RUNAT=SERVER LANGUAGE=VBSCRIPT> Function GetUpload
- 本文实例讲述了微信小程序控制台提示warning:Now you can provide attr "wx:key" f
- (1) os.system仅仅在一个子终端运行系统命令，而不能获取命令执行后的返回信息system(command) -> exit_
- 关于Python语言，众说纷纭，但无外乎两种，强大，垃圾。大多数人还是对Python持肯定意见，认为它很强大。前些天和两个的大学同学聊天，一
