(7)给包含块一个高度,或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中,如果你本意要实现下面效果:把小盒子在父盒子中的左上角垂直往下偏移,上方留出一块区域,如果你删除了box1的高度会怎么样呢?自己测试一下吧。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(8)放置绝对定位对像到可视区外会出现滚动条。一般情况下,绝对定位是用来方便定位网页要看得见元素的,而不是拿它来隐藏对象的,一般隐藏对象常用到display与margin,如果你试图把绝对定位的对象移出可视区域,嘿嘿,浏览器会为你准备滚动条去看望它。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(9)放置相对定位对像到可视区外不会出现滚动条。此现象很好理解,因为相对定位对象原来位置没有变,原来位置没有出去滚动条就不会出现。在下面实例中,如果你缩小浏览器窗口,相对定位的对象还会出现完全消失的情况呢。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(10)定位的特殊值情况。如果定位设置是这样的:position:relative ,right:200px, left:10px会出现什么情况呢?一边叫对象向右偏移10px,另一边又叫对象向左偏移200px,到底是听那边的呢,还是那个先,那个后呢。针对这种矛盾情况,CSS规定只听左边的left,而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话,就以top为准,所以在下面的实例中,你如何改变right的值,对象位置不会发生改变的。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
4.综合实例见证定位的魅力
先看最终演示效果,具体教程请继续关注,本人正抽空整理。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
5.延伸阅读
(1)详解定位与定位应用 小毅 蓝色理想 (2)由浅入深漫谈margin属性 怿飞 蓝色理想
经典论坛讨论: http://bbs.blueidea.com/thread-2733320-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4601.asp
出处:蓝色理想
责任编辑:moby
上一页 绝对定位和相对定位 [2] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|