【转】td在relative模式下，不显示边框的问题。

最新推荐文章于 2021-06-20 18:46:11 发布

Ever天忆

最新推荐文章于 2021-06-20 18:46:11 发布

阅读量911

点赞数

文章标签： css

本文介绍了当TD元素应用相对定位时出现边框缺失的问题及两种解决方案。第一种方法通过设置z-index为-1来实现，但会导致TD显示在表格之下。第二种方法则是使用background-clip:padding-box属性，能完美解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题：当给td设置相对定位时，之前设置的边框有部分不显示了。

td
{
    position:relative;
}

去网上找了资料，发现有两种解决方法。

方法1：

td
{   z-index=-1;
    position:relative;
}

但这样，td是显示在table之下的，当移动时，会被table的其它部门盖住。

方法2：

td
{    
    background-clip: padding-box;
    position:relative;
}

完美解决。

原来背景也有边界的：决定背景会盖住哪些部分。

background-clip: border-box　　　/*背景被裁剪到边框盒*/
background-clip: padding-box　　/*背景被裁剪到内边距框*/
background-clip: content-box　　/*背景被裁剪到内容框*/
background-clip: inherit　　　　 /*是否集成父元素属性*/