html - 单击时将 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 点击时显示弹出 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();
  })
})