无法定位元素

我试图定位这个“关于我”框，但我无法将其定位。我可以使用保证金左侧或保证金右侧属性向左或向右移动它，但我无法将其上移或下移。我已经使用float：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; 
    }

来源

2013-04-25 mr-karan

#box { 
position:absolute; 

background-color: black; 

width: 150px; 

height: 38px; 

margin-left: 0px; 

clear: both; 

margin-top: 200px;

}

看看一个牛逼这个演示：给予不同的位置上边距和位置改变....

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

来源

2013-04-25 11:49:18 PraJen

啊谢谢！你能解释一下吗？ – 2013-04-25 11:51:59

是的..当然..其实你错过了css属性位置：绝对; 位置：绝对需要从它的父div的位置..所以你可以安排在其父div的高度的任何地方的div ... – PraJen 2013-04-25 11:53:22

习惯了这种代码

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

}

Demo

来源

2013-04-25 11:56:09

的您的代码只有问题是垂直边距崩溃。为了防止它添加以下规则针对你的包装div 这将做。无需其他改变

#wrapper { 
    overflow:hidden; 

}

小提琴here

来源

2013-04-25 12:07:58 Fico

这里的问题就是浮动元素，我猜。为了使您的上边距的工作，只需插入一个空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>`

来源

2014-02-19 23:56:24 a1z10

无法定位元素

回答

相关问题