將絕對div沿相對位置放置

Question

我試圖在相對對象旁邊放置一個絕對對象。 初始對象使相對div包裝到下一行。

一切正常，除了徽標會強制標題移至新的“行”以外，其他所有內容均應正常工作。 如果將#logo div更改為position:absolute ，則可以解決定位問題，但是徽標懸停會停止工作。

編輯：這是一個實時演示： http : //vaer.ca/warm-forest-8234/

這是我的HTML：

<div id="container">

        <a href="index.html" id="logo"></a>

        <div id="header">

            <h2><a href="index.html">Collectif</a></h2>

        </div>  

        <div id="nav">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Work</a></li>
            </ul>
        </div>

這是我的CSS：

#container {
    width: 980px;
    margin: 0 auto;
    position: relative;
    }

#header {
    height: 75px;
    text-align: right;
    position: relative;
    }

#header h2 {
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 15px;
    }

#header a {
    text-decoration: none;
    color: #000000;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#header a:hover {
    color: #7acfdd;
    }

#logo {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    background: url('../img/logo.png') no-repeat;
    width: 60px;
    height: 60px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#logo:hover {
    position: relative;
    background: url('../img/logo-hover.png') no-repeat;
}

Answer 1

嘗試：

#logo {
    float: left;
}

Answer 2

我會說 ：

#logo {
    float: left;
    position: relative;
}

#header {
    height: 75px;
    text-align: right;
    position: relative;
    clear:both;
}

使用浮點數就好了：left; 和位置：相對； （當我需要將div浮動到另一個頂部時，我總是使用它，因為當您使用position：relative時，可以應用z-index）

Answer 3

您已將#logo鏈接設置為display:block強制<a>元素占用整個空間。 使用開發人員工具查看。 您可以執行以下操作來修復所有問題，並使其更具語義。

#logo{
display:inline-block;
}
#header{
display:inline-block;
float:right
}

這些更改將為您提供所需的結果。