获取图像覆盖在桌面

Question

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

我在这里开始了一个JSFiddle：https://jsfiddle.net/Thread7/f7g9dtxt/来解决它。如果你点击“Show Court”，你会看到现在会发生什么。图像位于底部和左侧。而不是顶部和中间。

下面的代码：

<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>

此外，在updated fiddle

Answer 2

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

$('.yourImage').toggle(); 
 
$("#showimg").click(function(e) { 
 
\t $('.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>