CSS中的position之高阶应用 Unknown 2008/12/13

| |

自己玩HTML也有些年头了。今天在分析一段CSS代码时,突然发现,原来CSS中的position如果设置为absolute时, 也是可以不参考整个浏览器框架的。这同样是CSS相对定位的一句语法,但它用了position:absolute。

当父对象的position为absolute或relative的时候。子对像如果设置了position为absolute,则top、left、right、bottom相对于父对象。说白了,只要你对象有了明确的position声明(不管是absolute还是relative),则此时子对象的定位是相对父对象而言的。

例子:

<div id= "AAA " style= "position:relative;border:1px solid black"> 基准点
<div id= "num1 " style= "position:absolute;top:50px;left:1px; "> 测试1 </div>
<div id= "num2 " style= "position:absolute;top:80px;left:1px; "> 测试2 </div>
</div>

效果:

基准点
测试1
测试2

象他这样把容器设置成position:relative,然后盒子position:absolute,这样就能避免容器用绝对位置来定位了。

这看似简单,却解决了定位的一大难题。

请给这篇日志评个分吧~!

本文评分: 4.3/10 (26 votes)    提示:您还未对本文评分,您可以进行评分并发表您的意见!

加入收藏!

发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [注册]