html - 添加 Div 而不改变其他 html 元素的位置

Question

我有一个 div，一旦我在代码中添加它，它就会向下移动一个表格元素。我很快就会使这个 div 能够滑动，但我还不能这样做，因为如果我这样做，一旦 div 滑入，表格就会向下移动。我将所有代码放在 JSfiddle 中这样您就可以看到所有内容，但我会将基本代码放在下面。

HTML:

<div id='fullPurchArea'>
<div>
<div id='checkbook'>
    <table id='tablecheck' cellspacing='0' ; cellpadding='0'>
      <th id='tableheader'>Check Book</th>
      <tbody>
        <tr>
          <th class='cats'>Item</th>
          <th class='cats'>Cost</th>
          <th class='cats'>Balance</th>
        </tr>
        <tr id='tr1'>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr id='tr2'>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr id='tr3'>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS:

#fullPurchArea {
  background-color: #D64040;
  width:400px;
  height:300px;
  position:relative;
  left:468px;
}
#tablecheck {
  position: relative;
  bottom: 290px;
  left: 980px;
  line-height: 10px;
  background-color: #8FF2E5;
  cellspacing: 0;
  cellpadding: 0;
  height: 240px;
}

.cats {
  padding: 15px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 5px gray;
}

#tableheader {
  color: #2AB5A2;
  text-shadow: 1px 1px 5px #46F271;
  text-align: center;
  position: relative;
  left: 70px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px
}

td {
  text-align: center;
  color: black;
  padding: 20px;
  font-family: 'Ubuntu', sans-serif;
  border-bottom: 1px solid black;
}

#tr1,
#tr3 {
  background-color: #D6D6D6;
}

#tr2 {
  background-color: #F5F5F5;
}

我不知道问题是否出在我发布的代码中，所以我建议您查看 JSfiddle。

编辑:为了澄清，每当我将 ID 为“fullPurchArea”的 div 添加到代码中时，ID 为“tablecheck”的表格都会重新定位。

Answer 1

自 CSS3 以来，我们有两种方法可以在不影响布局的情况下制作移动元素，第一种:

position: absolute;
top/left/bottom/right: 10px;

现在，您可以使用更简单的方式来移动 CSS3 和 transform: translate()

transform: translate(x, y);

或3D版

transform: translate3d(x, y, z);

请务必添加您需要的前缀(-webkit-、-moz-、-ms-)，在此处查看 2D这里是3D

使用 transform 可以让你移动元素而不影响布局，也不会像 position: absolute; 那样让你的元素失去空间。