CSS：在主div上放置一個盒子頂部

Question

我有以下HTML，中間居中居中div.logo。

什麼是最簡單的跨瀏覽器解決方案，讓我把另一個框contactDetails左或右，但保留居中圖像？

HTML：

<div id="page-wrap"> 
    <header> 
     <div id="logo"> 
       <img src="_assets/images/logo.png" width="500" height="518"/> 
       <h3>New Website Soon</h3> 
     </div><!--END logo--> 
     <div id="contactDetails"> 
      <p>Content</p> 
     </div> 
    </header> 
</div><!--END page-wrap--> 

CSS：

*{ 
    padding: 0; 
    margin: 0; 
} 
body{ 
    background:url('../images/background.png') repeat; 
    margin: 0 auto; 
} 
div.page-wrap,header,div.logo,h1{ 
    font-family: arial; 
    text-align: center; 
    margin:0; 
} 
div.page-wrap,header,div.logo,img{ 
    border-radius: 5px; 
} 
div.contactDetails{ 
    float: left; 
    margin: 0; 
} 

Answer 1

位置觸頭盒絕對。

對於它的價值，沒有你的CSS的上面會工作，因爲你正在使用一個點來表示類的div，而不是＃英鎊符號來表示的div ID（div.logo相當於<div class="logo">，div#logo對應於<div id="logo">）

#page-wrap { 
/* parents of absolutely positioned elements must have a position */ 
position: relative; 
} 

#contactDetails { 
position: absolute; 
top: 0; 
right: 0; 
/* you could use 'left: 0;' instead, to move to the left edge */ 
width: 300px; 
}