CSS定位中Positoin、absolute、Relative的一些研究_经验交流

Positoin属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。
  但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Positoin属性值为Relative时
对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有Top起作用。

left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时,只有left起作用。

2、当Positoin属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

  在Positoin属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一视同仁,^_^)的Positoin属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
  更多有关CSS的说明请参考手册:http://www.jb51.net/shouce/css/index.html
  辛苦了半天得出的结论,希望对大家有用。如果有疏忽之处,还请指正。

时间: 2024-10-07 10:55:47

CSS定位中Positoin、absolute、Relative的一些研究_经验交流的相关文章

CSS布局中可以用javascript判断浏览器版本_经验交流

if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7  alert('Mozilla, Safari,...IE7 '); if(!window.ActiveXObject){ // Mozilla, Safari,... alert('Mozilla, Safari'); } else { alert('IE7'); } } else { alert('IE6'); } 看看运行效果: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执

网页设计中的 serif 和 sans-serif字体应用_经验交流

Howdy, 大家好,又是我~  上一次我们简单的谈了一下font set和一些要注意的基本问题.今天我们继续字体这一话题,深入讲讲上次提到的"通用字体族".首先是最常用的 serif 和 sans-serif 这两个通用字体族.   - serif Serif 在印刷学上指衬线字体.为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子: My Georgia字体 King Times New Roman 字体 汉字 宋体 单词 My 中的字母 "M"上下方突出

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

IE6不能正常解析CSS文件问题的解决方法及原因分析_经验交流

网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI 编码,并没有保存为 UTF-8 格式.可能你会发现在一般情况下这样也是没有问题的,然而当 CSS 文件中包含有中文注释时就可能不尽如人意了!估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析,所以才会发生 CSS 在 IE6 下不起作用的情况.看来微软已注意到这个问题,在 IE7 中把它修复了.但是用IE6 的人还是不少.因此这个问题需要解决: 方法一:把 CSS.JS

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet

css网页布局中注意的几个问题小结_经验交流

一.少用偏门. 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测.  二.center不是float的值. 很多新手都会把center误认为是float的值,而偏偏不是如此.center只是text-align的值.  三.对齐不能包括两个值. 很多新手会在float或者text-align中填写两个值,比如:float:left top.这是不允许的,浏览器也无法识别.  四.滚动条颜色最好不要自

position:relative/absolute无法冲破的等级_经验交流

第一块 第二块 第三块 第四块 第五块

CSS渐变文本效果的两种方法比较_经验交流

是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon) 优势 这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6

一些很不错的css技巧,但也常为人们所忽略_经验交流

一.区分大小写 当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的.为了避免这种错误,我建议所有的定义名称都采用小写. 二.不需要给背景图片路径加引号 为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的.例如: background:url("images/***.gif") #333;  可以写为 background:url(images/***.gif) #333;  如果你加了引号,反而会引起一些浏览器的错误. 三.用正确的顺序指定链接的样式 当你用