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＆＃39; fullPurchArea＆＃39;的div时代码表中包含id＆＃39; tablecheck＆＃39;重新定位。

Answer 1

从CSS3开始，我们有两种制作移动元素的方法而不会打扰布局，首先：

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

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

transform: translate(x, y);

或3D版

transform: translate3d(x, y, z);

添加您需要的前缀（-webkit-， - emz - ， - ms - ），点击此处查看2D，此处查看3D

使用变换可以移动元素而不会影响布局，也不会让元素像position: absolute;一样丢失空间。

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

1 个答案: