css - 如何创建一个浮动的重新加载按钮

Question

我在 html 页面中有以下布局：

+-------------------------------------+
|                          | Reload   |
| dynamic graph image div  +----------+
|                                     |
|                                     |
|                                     |
|                                     |
+-------------------------------------+

动态图形图像 div 将通过 jquery POST 方法从另一个 php 页面获取图形，并且将有一个重新加载按钮（重新加载），它应该在动态 div 之上。此动态图将在每次查询时更改。按下此 Reload 链接后，jquery 代码将再次获取此动态 div 的图像/图形。通过这种方式，用户不需要重新加载整个页面。

但是我怎样才能放置重新加载链接，以便它位于图像/图表的顶部？

Answer 1

简单的 CSS：

.container_div {
    position:relative;
}
.container_content{
    position:relative;
    z-index:999;
}
.floating_button{
    position:absoltue;
    top:0;
    right:0;
    z-index:1000;
}

带有一些示例html：

<div class="contianer_div">
    <div class="container_content">
        Your content here
    </div>
    <div class="floating_button">
        button content
    </div>
</div>

这应该够了吧;

进一步阅读：http ://www.w3schools.com/css/css_positioning.asp

Answer 2

HTML：

<div id="dynamic">
    <a id="button">reload</a>
<div>

CSS：

#dynamic{
   position: relative;
}

#button{
   position: absolute;
   top: 0;
   right: 0;
}

Answer 3

这是一个 CSS 问题而不是 jquery 问题。

尝试这样的事情：

<div class="container">
    <img class="image" src="image.png"/>
    <a class="reload" href="#">Reload</a>
</div>


.container 
{
   position:relative;
   width:100%;
}

.image
{
    position:absolute;
    top:0;
    left:0;
    z-index:1;

}

.reload
{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    display:block;
    width:30%;
}