javascript - jQuery Datatables 按钮 CSS 定位

Question

我正在开发一个 Sharepoint web 部件，它利用 JQuery 数据表来格式化一些报告结果，报告如下所示:

我在使用“导出到 Excel”按钮时遇到问题。这是数据表生成的 native 按钮。我在按钮上有一个类:

.FSexportButton 
{
position: absolute;
right: -7px;
bottom: -20px;
}

并且类在表初始化时关联。只要报告有数据，它看起来就很好(如图所示)，但如果没有，定位就会偏离方向并且按钮会移动。来自 jQuery 的 CSS 覆盖了类中的 CSS 并使按钮的位置“相对”。基本上，我想弄清楚如何使该按钮保持在图片中的位置，而不管 div 的大小如何。

我添加了另一个类:

a.dt-button.advisorsExportButton {
position: absolute;
right: -7px;
bottom: -175px;
}

所以现在按钮是绝对定位的，原来位置的div:相对正在被覆盖。

Answer 1

错误的方式:

.FSexportButton 
{
position: absolute !important;
right: -7px;
bottom: -20px;
}

正确的方法:给它一个 id，让我们说:'excelbutton' 然后做

#excelbutton
{
position: absolute;
}

，或者找出给它 relative 的类并像这样做 .relativecclass.FSexportbutton:

.relativeclass.FSexportbutton
{
position: absolute;
}

在 css 中，更具体的规则总是覆盖以前的规则