Question

我正在做我的第一篇HTML＆amp;今天的CSS，我在尝试移动div时遇到了麻烦。我阅读了一些关于CSS的教程并尝试复制我所看到的内容。但由于某种原因，我无法让div移动。

有人可以直截了当地告诉我，我做错了吗？

CSS

#seax {
  position:static;
  top:400;
  left:400;
}

HTML

<div id="seax">
  <form autocomplete="off" method="post" action="/search.html">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

Answer 1

将position:static;更改为position:relative;。静态位置显示div的默认位置，就像它出现在您看到的文档流程中一样。

Answer 2

授予div position absolute

#seax {
  position: absolute;
  top:400;
  left:400;
}

Answer 3

将“px”添加到CSS中，并使用绝对

#seax {
position:absolute;
top:100px;
left:100px;
}

http://jsfiddle.net/djwave28/tnvQz/

Answer 4

这实际上取决于你想如何定位div。

position: static;绝对是您的问题，因为静态位置（如@Omega所述）会在其默认位置显示div。您的意思是写position: absolute或position: relative。两者之间的区别最好概括here，但我会给你一个tl;博士。

position: absolute将div相对于整个页面定位，而position: relative将其相对于父页面定位。

此外，您在px和top属性值（即left和top:10px;）

的末尾遗漏了left:10px;

Answer 5

尝试更改

<div id="seax"></div>

到

<div class="seax"></div>

和

#seax {
position:static;
top:400;
left:400;
 }

到

.seax {
 position:absolute;
 top:400px;
 left:400px;
}

如果您想将seax用于多个元素。

你甚至可以尝试：

<form autocomplete="off" method="post" action="/search.html">
  <div class="seax">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

那应该解决它。否则，您的HTML文档应如下所示：

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  </head>
  <style>
   .seax {
    position:absolute;
    top:400px;
    left:400px;
    }
</style>
<body>

<div class="seax">
 <form autocomplete="off" method="post" action="/search.html">
  <table>
    <tbody>
     <tr>
      <td>Search:</td>
       <td>&nbsp;
        <input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
         &nbsp;&nbsp; 
        </td>
        <td>
        <input type="hidden" name="brand" value="0">
        <input type="image" src="/user/templates/custom/search.gif" 
   value="Go" alt="Go" style="padding: 0px">
         </td>
        </tr>
      </tbody>
     </table>
   </form>
 </div>

</body>
</html>

无法让我的div移动（位置）

5 个答案: