[英]Positioning an absolute div along side a relative one
我试图在相对对象旁边放置一个绝对对象。 初始对象使相对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;
}
尝试:
#logo {
float: left;
}
我会说 :
#logo {
float: left;
position: relative;
}
#header {
height: 75px;
text-align: right;
position: relative;
clear:both;
}
使用浮点数就好了:left; 和位置:相对; (当我需要将div浮动到另一个顶部时,我总是使用它,因为当您使用position:relative时,可以应用z-index)
您已将#logo
链接设置为display:block
强制<a>
元素占用整个空间。 使用开发人员工具查看。 您可以执行以下操作来修复所有问题,并使其更具语义。
#logo{
display:inline-block;
}
#header{
display:inline-block;
float:right
}
这些更改将为您提供所需的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.