Question

我正试图定位这个'关于我'的方框，但我无法将其定位。我可以使用margin-left或margin-right属性向左或向右移动它，但我无法将其向上或向下移动。我用过浮动：右边放置侧边栏。所以我用了清楚：我的头上都有。但它仍然是静止的。

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

enter image description here

此页面的代码为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;
    }

Answer 1

 #box {
position:absolute;

background-color: black;

width: 150px;

height: 38px;

margin-left: 0px;

clear: both;

margin-top: 200px;

}

看看这个演示：给予margin-top和位置变化不同的位置......

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

Answer 2

用于此代码

#box:before, #wrapper:before{
    content:"";
    overflow:hidden;
    clear:both;
    display:table;

}

<强> Demo

Answer 3

您的代码唯一的问题是垂直边距折叠。要防止它添加以下针对您的包装器div的规则那样做。无需其他更改

#wrapper {
    overflow:hidden;

}

小提琴here

Answer 4

我猜这里的问题是浮动元素。要使您的上边距有效，只需插入一个带有样式[clear：both]的空div，如下所示， `

<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 style='clear:both'></div>
        <div id="box">
            <h3> ABOUT ME </h3>
        </div>
      </div>
</body>`

无法定位元素

4 个答案: