Question

我对网页设计很陌生，所以是的，但基本上我有一张桌子，两排，我有一张图片，我希望在桌子右侧的顶部作为半透明覆盖层，我也有控制该网页上其他元素的引导程序，所以我不确定这是否会阻止这些样式的应用，但无论如何这是我的代码，请问任何指针？！

该表最终会在一个列表中显示数据，这些数据将组成一个“领导者图表”，因此我将这个类命名为“图表”。

<div class="chart">
<table class="table">
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>13</td>
<td>15</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
<td>28</td>
<td>30</td>
 <img src="images/triangle.png" alt="triangle"/>
</tr>
</table>
</div>

CSS：

.chart {position: relative;}
.img
{position: absolute;
 right: 0px;
 top: 0px;
 opacity: 0.9;}

在浏览器中检查时，似乎没有CSS被应用于.chart或.img，图表没有应用css，而.img似乎只有默认引导程序设置的边框css文件。

任何指针都会非常感谢，谢谢。

Answer 1

您在CSS中引用了.img，但标记中没有class="img"的元素。我假设您尝试定位代码中的img，因此您可以将class="img"添加到img代码中，也可以更改CSS选择器以定位元素{ {1}}代替班级img。

.img CSS看起来不错，但您不会看到您对其所做的样式更改的任何视觉指示，因为它只是.chart。如果在开发控制台中查看该元素的样式，您应该会看到该样式应用于position: relative。

＆＃13;

.chart

＆＃13;

.chart {
  position: relative;
}

.img {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0.9;
}

＆＃13;

Answer 2

这里有几个问题。

您不能将img放在您目前所在的位置。看着你 css我想我可以看到你想要实现的目标。尝试放置它表格关闭forChild()代码后和router之前关闭forChild()代码。
将</table>添加到您的.chart元素中。您的css已为</div>使用了类选择器。否则改变您的css为class="img"而不是img。

您img的实施看起来很好。当你检查检查员中的img div时，这肯定应该有效。

Answer 3

您的.chart CSS不会显示任何视觉效果，因为它只是position: relative。但是，如果您想查看该元素的样式引用，请在Chrome或Firefox中按 F12 在Windows或Linux环境中使用开发人员控制台。
此外，我发现您在CSS中使用.img，但HTML代码中没有class="img"的元素。因此，如果您尝试定位img标记，则应更改CSS选择器，以使用类似img的父类来定位元素.chart > img。

现在，您可以在此处获得修改后的代码：

＆＃13;

.chart {
  position: relative;
}

.chart img {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0.9;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="chart">
  <table class="table">
    <tr>
      <td>1</td>
      <td>3</td>
      <td>5</td>
      <td>7</td>
      <td>9</td>
      <td>11</td>
      <td>13</td>
      <td>15</td>
      <td>17</td>
      <td>19</td>
      <td>21</td>
      <td>23</td>
      <td>25</td>
      <td>27</td>
      <td>29</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4</td>
      <td>6</td>
      <td>8</td>
      <td>10</td>
      <td>12</td>
      <td>14</td>
      <td>16</td>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
      <td>26</td>
      <td>28</td>
      <td>30</td>
      <img src="http://i.imgur.com/2RlpzDi.png?1" alt="triangle" />
    </tr>
  </table>
</div>

＆＃13;

Answer 4

感谢所有的回复，他们帮助很多，即使我实施了这个更正的代码，我仍然无法让我的图像坐在桌子的顶部，经过CSS文件中的大量故障排除我已经修复了问题，它事实证明问题是这个CSS：

.chart {
position: relative;
}

.img {
position: absolute;
right: 0px;
top: 0px;
opacity: 0.9;
}

是在这个@media专栏之后：

@media all and (max-width: 768px){

我现在把CSS放到.chart＆amp; .img在它之前并且完美地工作，谢谢你。

将图像叠加到HTML表格上

4 个答案: