Как создать оверлейную кнопку на разных элементах div

Question

Как создать кнопку, которая будет перекрывать каждый элемент HTML с классом WSEDIT.

Сначала я знаю, что мне понадобится цикл 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>

Вот что я пытаюсь сделать на следующем рисунке.

Вопрос в том, каким должен быть CSS для моей кнопки класса btn. BBtnConfigure
Как вы можете видеть на рисунке, BtnConfigure перекрывает каждый раздел.

Answer 1

1. Контейнер (WSEDIT) должен иметь position:relative, чтобы вы могли абсолютно точно позиционировать кнопку.
2. Кнопка должна быть внутри контейнера
3. Для кнопки требуется: position:absolute; top:-10px; right:-20px (приблизительно)