relative布局--块级元素

今天实现一个简单的功能：

就是td里面内容超出左边一部分，并覆盖掉左边的边框。一般情况下我是设置外层的父元素为relative，并且设置一个z-index,之后设置里面的元素同样是relative,设置其背景覆盖外层边框即可。但是后来发现文字上面的空白部分一直实现不出来，使用margin-top是无效的，但是我记忆中当元素设置为position:relative之后元素就变成了一个块级元素，怎么会设置上下外边距无效呢？

后来一查才发现，原来是自己记错了。只有当设置position的值为absolute/fixed才会使得行内元素自动转换为块级元素，而relative是不会的。后来直接设置了display: block后就可以了。

总结起来行内元素自动变为块级元素有三种方法：

position: absolute/fixed
float: left/right
display: block/inline-block（这两个属性是最常见的两个属性，还有其他属性但是不常用）