层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:
IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:
相关推荐
div+css,web标准,div+css布局,div+css实例,div+css模板
通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页...
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css 网站实例 教程 css布局
Div+CSS网页样式与布局从入门到精通的配套实例
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 ...
div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例
div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3 div+css切图实例3
Div+Css网页布局和样式开发实例,涵盖使用的div+css布局实例上百种。
Div+CSS布局入门教程,本教程含实例文件,欢迎有需求者下载
第一天 XHTML CSS基础知识 第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 ...第十天 div+css网页标准布局实例教程...第十天 div+css网页标准布局实例教程(三)
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
最新版十天学会div+css(实例源代码及psd源文件)
Div+CSS布局入门教程Div+CSS布局入门教程Div+CSS布局入门教程
几个漂亮网站首页的源码(全),学习css和自己设计网页的一大助力。
由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的。 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或...
div+css的对淘宝网首页的分析,不错的,比较透彻
Div+CSS布局实例教程,Div+CSS布局实例教程,Div+CSS布局实例教程。。。
整理一些认为比较好的DIV+CSS网页设计实例