将图像叠加在桌面上

Question

我有一张篮球统计表，我有一个篮球场的图像，后来会包含一个投篮图。 它最初是隐藏的。 我希望图像仅在用户单击按钮时显示。 并且图像应该出现在表格的顶部。 （大多数表都将在图像后面）我似乎无法操纵CSS或Jquery位置以允许这种情况发生。 部分问题是我希望表本身居中（margin：0px auto;）

我在这里开始了一个JSFiddle： https ：//jsfiddle.net/Thread7/f7g9dtxt/来解决它。 如果单击“显示法庭”，您将看到现在发生的事情。 图像位于底部和左侧。 而不是顶部和中部。

代码如下：

<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th>    </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>

CSS：

.mytable {
  margin: 0px auto;
}
.mytable td {
  text-align: left;
  border: solid;
  padding: 5px;
  margin: 0px;
}

.myimg {
  display: none;
  margin: 0px auto;
}

JQuery的：

$("#showimg").click(function(e) {
  $("#court").show();
});

Answer 1

您应该将表包装在具有相对位置的元素中，而不是放置图像（也在具有绝对位置的容器中）。 这样你就可以更好地控制这些元素。 看看这个：

 $("#showimg").click(function(e) { $(".myimg").toggle(); }); 

 .mytable { margin: 0px auto; } .mytable td { text-align: left; border: solid; padding: 5px; margin: 0px; } .myimg { display: none; position: absolute; top: 0; width: 100%; text-align: center; } .table_container { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='showimg'> Show/Hide Court </button> <div class="table_container"> <table class='mytable'> <tr> <td>Michael</td> <td>Jordan</td> <td>5</td> <td>10</td> </tr> <tr> <td>LeBron</td> <td>James</td> <td>3</td> <td>7</td> </tr> <tr> <td>Kobe</td> <td>Bryant</td> <td>1</td> <td>8</td> </tr> <tr> <td>Magic</td> <td>Johnson</td> <td>6</td> <td>11</td> </tr> </table> <div class="myimg"> <img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' /> </div> </div> 

也在更新小提琴

Answer 2

试试这个： https ： //jsfiddle.net/f7g9dtxt/3/

 $('.yourImage').toggle(); $("#showimg").click(function(e) { $('.yourImage').toggle(); }); 

 .mytable td { text-align: left; border: solid; padding: 2px; margin: 0px; } .mytable { position: absolute; z-index: 0; } .yourImage { position: absolute; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='showimg'> Show Court </button> <table class='mytable'> <tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr> <tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr> <tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr> <tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr> </table> <span class="yourImage"> Put an img tag here! </span>