一个朋友问过我css的定位属性中，absolute与relative到底有什么区别？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？但是他们绝对和相对又是参照什么基点来的呢？
position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT是个属性(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为基点(注意，仅仅是父级，而不是祖父级、曾祖父级。。)，如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角作为基点参照TRBL属性进行定位，此时对象不再具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，此时对象不可层叠，即设置z-index属性无用。
一个简单的问题实现在div+css中实现起来可没有那么轻松，参考网上找到的一些资料，找到了一个相对比较简单，而且效果还不错的方案，如下：
html结构很简单如下
<div class=”img_wrap”><img src =”http://www.baidu.com/img/baidu_logo.gif” /></div>
css样式
.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 131px;/*约为高度的0.873，150*0.873 约为131*/
width:150px;
height:150px;
border: 1px solid #ccc;}
.img_wrap img{vertical-align:middle;}
最近调页面的时候遇到个问题.
IE，CHROME下显示很正常，但不管怎么调整在firefox下显示，<h2>标签内容都显示到<dt>标签外
最后发现原因如下：是在firefox下<dt>标签里不能加其它的标签h系列标签，dt已经有标题的意思了，没必要再加h1，dt内不能嵌套块级元素。
其实原理也很简单:用
<li><a>标签</a></li>
做单个标签，然后给li和a分别设置背景，
li设为
li{
margin:0 3px;
padding:0;
float:left;
height:20px;
background-image:url(“bg1.gif”);
background-repeat:repeat-x;
background-position:left bottom;
}
a设为
li a{
display:inline-block;
margin:0;
padding:0 5px;
background-image:url(“bg2.gif”);
background-repeat:no-repeat;
background-position:right bottom;
height:20px;
}
不过li的背景从左往右展开，所以要够长，a的背景只要很短，放最右边就可以了
最终效果：
近期评论