为什么我的 td 内的 p 标签会根据完整的 table 设置样式？

Question

我的问题是为什么 td 中的 p 标签的样式是根据完整的 table?

我想要的是 top: 100% 是 td 高度的 100%，而不是 table 高度的 100%。

很可能是我自己犯了一些我似乎没有注意到的简单错误所以我想如果你们能帮我找到那个错误或者帮我设计风格我的文字基于 table 数据。

jsfiddle: https://jsfiddle.net/7oyxc1jh/

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> test </title>
    <link rel="stylesheet" href="test.css">
  </head>

  <body>
    <table id="buyingOptions">
      <tr>
        <td>
          <p class="name"> PandaFeeder </p>
          <p class="productioning">Production: <span id="pandaFeederProduction"> 2 </span> </p>
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
      </tr>
    </table>
  </body>
</html>

CSS:

html,body {
 height: 100%;
 width: 100%;
}

table{
  position: relative;
  width: 100%;
  height: 30%;
  text-align: center;
}

td,tr{
  width: 100%;
  height: 30%;
  border: 2px solid black;
}

.name{
  position: absolute;
  top: 0;
  left: 4%;
}

.productioning{
  position: absolute;
  top: 100%;
  left: 4%;
}

Answer 1

只需添加：

td {
  position: relative;
}

添加到您的样式定义中。绝对定位时，浏览器必须知道相对于哪个元素应该定位绝对元素。在这种情况下，您会喜欢 "td"。检查更新后的 fiddle：https://jsfiddle.net/7oyxc1jh/2/

另请注意，"top: 100%" 在这种情况下表示 - “位于包含（相对）元素的底部，因此在您的情况下它将出现在第二行。

为什么我的 td 内的 p 标签会根据完整的 table 设置样式？

Why does my p tags inside of the td get styled according to the full table?

html

css

css-tables