图表内的移动按钮答案

【问题标题】：Move button inside the chart图表内的移动按钮
【发布时间】：2015-04-28 00:37:48
【问题描述】：

我有以下项目，我在图表上显示信号。最近我实现了 pdf 导出。但是我希望这个按钮位于图例的顶部或下方。我想不通。

<div id="chart"></div>
<button class='export-pdf k-button'>Save as PDF</button>

【问题讨论】：

【解决方案1】：

我创建的解决方案与提供的解决方案略有不同。我将您的图表 div 包裹在一个相对定位的 div 中：

#chart-container { position: relative; }

然后我给按钮绝对定位，所以它总是相对于包装容器（而不是窗口）绝对定位。

祝你好运！

【讨论】：

非常感谢您的出色回答。我想知道如果我有多个信号怎么办，您不认为按钮会与图例重叠吗？
确实如此。你可以通过几种不同的方式来解决这个问题：我建议的一种是你 100% 肯定的方法。在这种情况下，您可以使用“底部”并给它一些“填充”（引号是因为您不会使用填充属性），而不是使用绝对定位按钮的“顶部”属性。这是另一个小提琴：jsfiddle.net/iamjpg/4vv4nwrb - 这样您就知道按钮将始终与图表底部对齐。

【解决方案2】：

Try this code.

.k-button {
    float: right;
    margin-top: -45px;
    position: relative;
}

【讨论】：