我正在尝试将绝对对象放置在相对对象旁边。初始对象导致相对 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;
}