position:四个值效果对比(添加自己的看法)
2009-09-13 19:55
239 查看
说明:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative
: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed : IE5.5及NS6尚不支持此属性
在此以自己的体会简要说明其区别:
absolute:相对
的,
可以随意拖拉,可以规定层级,它的爸爸就是套在它外头那个;
relative
:相对的,
不可以规定层级,它的爸爸也是套在它外头那个;
fixed:固定的,它的爸爸是HTML;
以下是个测试文件
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative
: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed : IE5.5及NS6尚不支持此属性
在此以自己的体会简要说明其区别:
absolute:相对
的,
可以随意拖拉,可以规定层级,它的爸爸就是套在它外头那个;
relative
:相对的,
不可以规定层级,它的爸爸也是套在它外头那个;
fixed:固定的,它的爸爸是HTML;
以下是个测试文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>position</title> <mce:style type="text/css"><!-- body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000; margin:50px; top:-50px; line-height:18px; overflow:hidden; clear:both; height:1%; } div#sub{ position:absolute; right:10px; top:10px; } div.relative{ position:relative; left:400px; top:-20px; } div.static,div.fixed,div.absolute,div.relative{ width:300px; } div.static{ background-color:#bbb; position:static; } div.fixed{ position:fixed; background-color:#ffc0cb; left:400px; top:60px; } div.absolute{ background-color:#b0c4de; } div.relative{ background-color:#ffe4e1; } --></mce:style><style type="text/css" mce_bogus="1"> body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000; margin:50px; top:-50px; line-height:18px; overflow:hidden; clear:both; height:1%; } div#sub{ position:absolute; right:10px; top:10px; } div.relative{ position:relative; left:400px; top:-20px; } div.static,div.fixed,div.absolute,div.relative{ width:300px; } div.static{ background-color:#bbb; position:static; } div.fixed{ position:fixed; background-color:#ffc0cb; left:400px; top:60px; } div.absolute{ background-color:#b0c4de; } div.relative{ background-color:#ffe4e1; }</style> </head> <body> <div id="demo"> <div class="static">static: 默认值。无特殊定位,对象遵循HTML定位规则 </div> <div id="sub" class="absolute">absolute:将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div> <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。通过它可以让HTML元素脱离文档流固定在浏览器的某个位置</div> <div class="relative">relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div> </div> </body> </h
相关文章推荐
- 为Elasticsearch添加中文分词,对比分词器效果
- PPM眼中合格的程序员,欢迎大家添加自己的看法
- 自己动手丰衣足食,为Zepto添加Slide动画效果
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
- 输出带有是/否的对话框,实现效果是:点击是,继续添加内容,点击否,返回自己定义的页面
- 为Elasticsearch添加中文分词,对比分词器效果
- GTA5详尽画质选项分析及效果对比。量力而行,适合自己的才是最好的
- 为Elasticsearch添加中文分词,对比分词器效果
- 入门视频处理6: 怎么给自己拍摄的视频添加效果?
- 为Elasticsearch添加中文分词,对比分词器效果
- 添加search + home +back +menu 四个物理按键添加震动效果
- php 网站添加视频,如何实现这种效果,自己开发,还是找视频插件商买
- 为Elasticsearch添加中文分词,对比分词器效果
- 为Elasticsearch添加中文分词,对比分词器效果
- 做一个@font-face添加自己想要的字体样式,且用@keyframes做移动、旋转、阴影动画效果
- mongodb与mysql命令对比 (前人笔记+自己添加)
- ECSHOP首页flash幻灯片修改为循环图片(可以自己添加jq,js效果)
- 自己给 TextView 添加 placeholder效果
- NGUI和可视化添加按钮注册事件效果相同的代码
- 在Eclipse的About对话框上添加自己的图标