html - 无法定位元素

我正在尝试放置“关于我”框，但无法定位。我可以使用margin-left或margin-right属性向左或向右移动，但不能将其上下移动。我使用了float：right来放置侧边栏。所以我在头文件上都使用了clear：both。但是它仍然保持静止。

以下图像将帮助您了解我的问题。

此页面的代码为here（jsFiddle）

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="description">
    <link rel="stylesheet" media="screen" href="style123.css">

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>My First Page</title>
</head>

<body>
    <div id="wrapper">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div id="box">
            <h3> ABOUT ME </h3>
        </div>
      </div>
</body>
</html>

CSS：

body {
   background: #091A1B;
   color: #544738;
   font-family: helvetica, sans-serif;
}

#nav {
      margin-top: 0px;
      float: right;
}

ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
}

li a {
    color: #544738;
    text-decoration: none;
    float: left;
    font-size: 25px;
    padding: 12px;
}

li a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
    color: #25296F;
}

#box {
      background-color: black;
      width: 150px;
      height: 38px;
      margin-left: 500px;
      clear: both;
      margin-top: 500px;
    }

最佳答案

 #box {
position:absolute;

background-color: black;

width: 150px;

height: 38px;

margin-left: 0px;

clear: both;

margin-top: 200px;

}

看一下这个演示：
将不同的位置赋予页边距，然后位置发生变化。...

演示：http://jsfiddle.net/Praveen16oct90/ZFzp7/1/

关于html - 无法定位元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16213847/