新闻动态
新闻动态
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
- 多用户商城和单用户商城的区别有哪些?
- 淘宝运营和京东运营有什么区别
- 单工通信、半双工通信、全双工通信的概念
- mssql如何复制表结构
- O2O、C2C、B2B、B2C的区别
- Nuxt3 创建项目、启动项目、访问项目
- 什么是Stop Words?
- Func<>介绍
- dtcms页面标签说明
联系我们
邮箱:
手机:15383239821
前端设计
CSS中position的absolute和relative的应用
作者:
发布时间:2012-11-30
点击:
之前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。
默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
<div id="B">
</div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
新闻资讯
-
2023-01-28require 和 import的区别
-
2013-06-28Asp.net 备份和还原SQL Server及压缩Access数据库方法 .
-
2010-08-03js表格字段排序
-
2010-07-20怎么看百度蜘蛛什么时候来
-
2023-10-09thinkphp实例化模型、模型命名和获取字段
-
2019-11-25dtcms系统架构
相关案例
