javascript - 如何调整选项卡容器中的 div 位置？

Question

我有一个 div，只有当我点击一个单选输入时它才会出现。但是在它显示之后它弄乱了我的其他单选按钮。我怎样才能调整它的位置？

<!-- radio button code -->
<div id="chartDiv" style="display:none;" class="answer_list">Stĺpcový graf</div>
<input type="radio" name="grafy" value="graf5" onclick="showDiv()" />

(单击单选按钮后 div 外观的 JavaScript 函数)

function showDiv() {
     document.getElementById('chartDiv').style.display = "block";
}

Answer 1

尝试在 div 上添加 position:absolute，这意味着它不会影响页面中任何其他元素的布局。

<div id="chartDiv" style="display:none;position:absolute;" class="answer_list">

如果有帮助，您可以使用 top 和 left css 属性定位 div。

 <div id="chartDiv" style="display:none; position:absolute; top:20px; left:20px;" class="answer_list">

您可能还需要将 position:relative 添加到父元素，以使 .answer_list div 相对于该元素定位自身。

 <div style="position:relative">
    <!--other elements radio buttons and so on-->
    <div id="chartDiv" style="display:none; position:absolute; top:20px; left:20px;" class="answer_list">
</div>