理解绝对定位和相对定位布局（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
投稿猜你喜欢
- 最近，在搞这个东西，网上也找不到asp相关的，如果有人很早弄出来了，也不要笑话偶；费了好久，总算搞定；原理：用stream对象预读文件的头两
- 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个
- 去掉html中的table代码 Function OutTable(str) dim a,re&nb
- 只是做笔记，没什么！！ 代码如下:--创建测试表 CREATE TABLE [dbo].[Student]( [ID] [int
- 元素的CSS样式，除了包括内联的（即通过style属性加上的）样式定义外，还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el
- 您是否常常在做网页的过程中发现一个问题呢？当图片上传的时候，如果图片太大 ，就会把网页撑破，唯一做的就要先把它用软件缩小，再上传上
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
众所周知，透明的PNG图片在IE6中是不透明的。为了在IE6中显示透明的PNG图片，找了一下方法，在网页中嵌入JS语句，可是执行效果并不尽如- Array()CInt()CStr() Date() DateAdd() Day() FormatCurrency() FormatDate
- 在我们制作网页的时候会经常碰到一些需求，如果不知道方法，说不定会困扰我们半天。其实实现它们都很简单，下
- 1.认识数组数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组，但是因为数组里面可以包含对象（
- 对于access数据库的日期时间类型字段存储的日期，直接从数据库中读出显示的效果是带时间的如，2009-06-13 18：00 ，如果只是希
- Insert 和 Update假设现在你要把下面的数据插入到数据库中.ID = 3TheDate=mktime(0,0,0,8,31,200
- 1. RS.OPEN SQL,CONN,A,B,C2. CONN.EXECUTE(SQL,RowsAffected,C)参数含义:SQL的值
- 在SQL Server中，为了查询性能的优化，有时我们就需要对数据表通过建立索引的方式，目的主要是根据查询要求，迅速缩小查询范围，避免全表扫
- 如何对设计进行评判，一定有很多答案，有利有弊。问100位设计师，会得到100种回答。用线上PV、UV等数据说话，更多受产品属性、运营动作影响
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 7 - Set and Get Style Pro
- Q： 不知xml和html有什么区别？它们不同在哪？ A： 关于XML和HTML区别请参考： http://www.w3c.org/Mark
- 如果你用ODBC connection (DSN or DSN-less)来访问远端的(UNC path)数据库, OLEDB会出现以下错误
- 文件名字处理文件名字得看业务要求。不需要保留原始名字，则随机生成名字，拼接上白名单校验过的后缀即可。反之要谨慎处理：//允许上传的后缀白名单
