html - 为什么我不能用定位移动我的一些 table ？

Question

我已经设法让我的响应式网站的某些部分正常工作，但在移动某些表格方面仍然存在一些问题。出于某种原因，我可以在某些方向上移动 table ，但不能在其他方向上移动，例如顶部。对于下表，如果可能的话，我想将它移低，但即使将 !important 这个词放在顶部之后，它也不起作用。对于第一张图片，我似乎无法将其进一步向右移动，而对于第二张图片，我似乎无法将其进一步向下移动....

Image 1

Image 2

这是第一个问题的表格代码

.header2_user_information {
  background-color: #FAEBD7;
  table-layout: fixed;
  width: 110%;
  position: relative;
  right: 20em;
}

<table class="header2_user_information">
  <tr>
    <th colspan="2">User\'s General Information</th>
  </tr>
  <tr>
    <th>First Name:</th><td>Mervin</td>
  </tr>
  <tr>
    <th>Last Name</th><td>Lee</td>
  </tr>
  <tr>
    <th>Email Address:</th><td>piano0011@gmail.com</td>
  </tr>
  <tr>
    <th>User ID:</th><td>piano0011</td>
  </tr>
  <tr>
    <th>Administrator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Moderator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Premium Membership Status:</th><td>Member</td>
  </tr>
</table>

第二个与第一个非常相似......

Answer 1

有关于何时可以使用 CSS 偏移属性的说明。根据 FreeCodeCamp:

When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned.

您的代码片段中有 position: relative 但根据您的问题，您可能在实际代码中忘记了它。或者您在其他地方覆盖了它。 (使用浏览器的“检查元素”来检查它。)

.header2_user_information {
  background-color: #FAEBD7;
  position: relative; /* Note this line. It is necessary to use CSS offsets */
  top: 30px;
  left: 2em; /* px, em, percentage or any other value is acceptable */
}

<table class="header2_user_information">
  <tr>
    <th colspan="2">User\'s General Information</th>
  </tr>
  <tr>
    <th>First Name:</th><td>Mervin</td>
  </tr>
  <tr>
    <th>Last Name</th><td>Lee</td>
  </tr>
  <tr>
    <th>Email Address:</th><td>piano0011@gmail.com</td>
  </tr>
  <tr>
    <th>User ID:</th><td>piano0011</td>
  </tr>
  <tr>
    <th>Administrator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Moderator Status:</th><td>None</td>
  </tr>
  <tr>
    <th>Premium Membership Status:</th><td>Member</td>
  </tr>
</table>