無法定位元素

我試圖定位這個「關於我」框，但我無法將其定位。我可以使用保證金左側或保證金右側屬性向左或向右移動它，但我無法將其上移或下移。我已經使用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

無法定位元素

回答

相關問題