How to create a button that will overlay each html element with class WSEDIT.

First I Know I'll need a javascript loop to find each element with css Class WSEDIT and create on the fly a button and prepend this button in each element with WSEDIT class.

Example of javascript loop and the button creation

$(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>

Here is what I'm trying to do in the following picture.

The question is , What should be the CSS for my btn class button BBtnConfigure
As you can see in the picture, the BtnConfigure is overlapping each Section.

How to create a button that will overlay each html element with class WSEDIT.

First I Know I'll need a javascript loop to find each element with css Class WSEDIT and create on the fly a button and prepend this button in each element with WSEDIT class.

Example of javascript loop and the button creation

$(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>

Here is what I'm trying to do in the following picture.

The question is , What should be the CSS for my btn class button BBtnConfigure
As you can see in the picture, the BtnConfigure is overlapping each Section.

• javascript
• jquery
• css
• html
• css-float

1 Answer 1

1. The container (WSEDIT) should have position:relative so you can absolutely-position the button.
2. The button should be inside the container
3. The button needs: position:absolute; top:-10px; right:-20px (approximately)