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

时间:2012-02-21 18:03:44

标签: javascript jquery css html5 css-float

如何创建一个按钮,用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>

以下是我正在尝试做的事情。

enter image description here


问题是,我的btn类按钮BBtnConfigure的CSS应该是什么 如图所示,BtnConfigure与每个Section重叠。

1 个答案:

答案 0 :(得分:3)

  1. 容器(WSEDIT)应该有position:relative,因此您可以绝对定位按钮。
  2. 按钮应位于容器内
  3. 按钮需要:position:absolute; top:-10px; right:-20px(大约)