CSS Position
作者:糖伴西红柿 来源:前端观察 时间:2009-05-17 14:27:00
1. position:static
所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。
一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。
#div-1 { position:static;}
2. position:relative
如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】
#div-1 { position:relative; top:20px; left:-40px;}
3. position:absolute
当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。
#div-1a { position:absolute; top:0; right:0; width:200px;}
4. position:relative + position:absolute
如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。
#div-1 { position:relative;}#div-1a { position:absolute; top:0; right:0; width:200px;}
标签:css,位置,position
0
投稿
猜你喜欢
mysql中从字段中URL提取域名信息
2009-05-25 10:35:00
带你深入了解Access数据库的4种安全方式
2008-11-28 14:34:00
使用ACCESS做网络版程序的四种解决方案
2009-01-14 16:22:00
ASPImage组件的实现过程[图]
2008-02-03 15:37:00
Persits AspJpeg组件图片水印\\缩略图\\图片合并\\图片切割\\实例教程
2008-12-14 10:36:00
SQL 2008的变更数据捕获——跟踪可变部分
2009-03-20 11:47:00
用JS实现渐变效果,兼容各款浏览器
2008-09-13 19:10:00
AES算法 asp源码
2009-08-28 13:05:00
CSS高级文字排版的实例
2009-03-24 20:56:00
css基础教程布局篇之一
2008-07-31 17:21:00
网站改版常见问题答疑
2008-08-22 18:31:00
CSS模块化设计—从空格谈起
2007-12-15 09:41:00
HTTP状态码
2009-09-21 12:46:00
不拘小节的中文字体设计
2009-05-21 10:44:00
JavaScript程序编码规范[译]
2009-07-20 17:54:00
如何让12px以下的文字最佳显示
2008-01-24 18:39:00
用户体验设计何去何从,交互设计师又何去何从?
2009-12-28 13:07:00
用FSO操作 xml
2008-09-03 12:26:00
全局字体最佳实践
2009-08-13 14:37:00
使用cookie和application实现在线人数统计
2007-09-18 13:01:00