CSS position CSS的position属性详解
看了下文，希望会对大家有所帮助！
position的四个属性值： relative ，absolute ，fixed，static
下面分别讲述这四个属性，以简单代码表示
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
对于此，只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。
随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置
不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
**************
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当sub1的父对象parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
接下来的问题是，sub2的位置到哪里去了呢 由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
（保护湿地2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。
**********************
3. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
4. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
不好理解的是absolute，需要细细琢磨...
为了您的安全，请只打开来源可靠的网址
打开网站 取消
来自: /catprayer/blog/item/7a1924cb49febb4ff31fe74f.html
评论(0)
窗体顶端
表情
窗体底端
©2010 Baidu 使用百度前必读 百度空间协议 联系我们
∙ 个人中心咸鱼翻身记
∙
∙ 我的主页
∙
∙ 好友
∙
∙ 消息
xel7000 | 装扮 | 设置 | 退出
xel7000
∙ 文章
∙ 相册
∙ HOHO
∙ 转贴
∙ 投票
∙ 测试
∙ 礼物
∙ 宠物
∙ 网页游戏
添加 设置
转贴
窗体顶端
窗体底端
∙ 热门转贴
∙ 最新转贴
∙ 好友的转贴
∙ 我的转贴
如何转贴? 问题反馈
破天荒的爱丽丝的转贴
转贴
来自:
zzcc_8
第一转贴:
破天荒的爱丽丝
时间:
2010-06-27 15:56
评论:
0条
投票:
0次
本贴转贴:
2
累计转贴:
3
破天荒的爱丽丝的 相关转贴:
∙ tTimeout,tInterval的使用及区别
∙ 历年四级真题下载（2000年1月——2010年6月...
∙ After Effects CS4下载 AECS4中文版+汉化包...
∙ qq表情不見的處理方法
∙ 希腊诸神十大栖居地[10P]
他们也在玩的应用
CSS:position:relative;的认识
CSS定位的原理
把浏览器窗口想象成一个坐标系统：
CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。
采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。
绝对定位
一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。
要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：
#box1 {
position:absolute;
关于迟到的检讨 top: 50px;
left: 50px;
澳大利亚农业}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
相对定位
要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。
采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。
举个相对定位的例子，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {七夕杜牧
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
css里的position的值relative、absolute的实际意义
position属性其实是指本体对上级的定位。默认的属性值都是static，静态。 最关键的是relative（相对）以及absolute（绝对）。
如： <div id="A">
<div id="B">
</div>
</div>
当A的position为relative时，B的position王者壁纸为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。 position:absolute: 绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
position:relative: 相对定位，是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
注意:相对在无父级时以BODY为原始点,而绝对是以浏览器最左上角为原始点.
下面实例说明上面这句话:
<style>
#wrap{
width:500px;
background-color: red;
height:auto;
}
#column1{
position:absolute;
top:0px;
left:0px;
width:300px;
background-color: green;
}
#column2{
position:relative;
top:0px;
left:0px;
width:470px;
background-color: #FFFF66;
}
</style>
<body > /*这里我用框框出来,好识别*/
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>
</body> |
|
为了您的安全，请只打开来源可靠的网址
打开网站 取消
来自: 日式短发/zzcc_8/blog/item/3b7be224cfdc3822d5074258.html
评论(0)
窗体顶端
表情
窗体底端
©2010 Baidu 使用百度前必读 百度空间协议 联系我们
