CSS中position的absolute和relative的应用
position属性其实是指本体对上级的定位。如果这么理解,就好办了。
默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
本文来自:http://www.awflasher.com/blog/archives/731
相关文档:
一、页面布局与规划
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要 ......
几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理。通过了解哪些属性控制呈现的哪些方面,可以定制菜单的外观。本主题介绍由 Menu 控件公开的样式类型,并建议一些使用 Menu 控件设置样式的最佳做法。
可以直接在标记中设置各种样式的属性或使用样式表 ......
1.span 的 overflow :hidden width:70px ; display:block(一点要加上div的话不用加)
2.js动态换背景,换背景 style.backgroundImage = "url('images/bg1.jpg')";
3.用onFocus="this.blur()"来消除链接后的焦点虚线框
4. onMouseOver onMouseOut onClick 三个时间在一 ......
常用的网站命名 收藏
1.CSS ID 的命名
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题 ......