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(这两个属性是最常见的两个属性,还有其他属性但是不常用)
发布了30 篇原创文章 · 获赞 6 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_21901233/article/details/86580923