单击时将div置于按钮上

Question

点击按钮后，我想在按钮上放置一个div，如下图所示：

http://i.imgur.com/pdrqnmj.png

关于如何做到这一点的任何想法？

Answer 1

将按钮和div面板放在父div中。使弹出div绝对和隐藏。

.parent-div{
   position:relative;
}

.popup-div{
   position:absolute;top:0px;left:0px;
   z-index:10;
   display:none;
}

在btn点击时显示popup-div。

$(".btn").on("click", function(){
   $(".popup-div").show();
});

Answer 2

你可以做到！假设您的页面左下方有按钮。

我只会显示基本的，只显示按钮和div的代码。希望能帮助到你。

css：

.button, .div {
position: absolute;
bottm: 0;
left: 0;
}
.div {
display: none; // to make it hidden.
}

HTML将是：

<button class="button">I am button</button>
<div class="div">I am on the button!</div>

现在jQuery应该是这样的：

$(document)ready(function() {
  $(".button")click(function() {
    $(".div").show();
  })
})