如何在不同的包含 div 上创建叠加按钮

Question

如何创建一个按钮，用 WSEDIT 类覆盖每个 html 元素。

首先，我知道我需要一个 javascript 循环来查找具有 css 类 WSEDIT 的每个元素，并动态创建一个按钮，并在每个具有 WSEDIT 类的元素中添加此按钮。

javascript循环和按钮创建示例

$(function()
   $(".WSEDIT").each(function(){
      var btnConfigure = $("<div class='BBtnConfigure'>");
      $(this).prepend(btnConfigure);
   });
);   


<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    </p>
<div>

<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
   <h2>Sale For First Trimestriel</h2>
   <img src="/graph.png" />
<div>


<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
   <table>
     <tr><td>Name</td><td>Sex</td></td>Age</td<td>Country</td></tr>
     ...
   </table>

<div>

这是我在下图中尝试执行的操作。

问题是，我的 btn 类按钮 BBtnConfigure 的 CSS 应该是什么
正如您在图片中看到的，BtnConfigure 与每个部分重叠。

Answer 1

1. 容器（WSEDIT）应该有 position:relative这样你可以绝对定位按钮。
2. 按钮应该在容器内
3. 按钮需要：（position:absolute; top:-10px; right:-20px大约）