(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.延伸阅读
出处:蓝色理想
责任编辑:moby
◎进入论坛网页制作、网站综合版块参加讨论