题
我正在尝试制作一个标题栏,其中包含图像,后跟标题和菜单车。 在50px之后显示栏,我希望图像稍微向上移动,使其在包装div的顶部并在上面的50px中显示一点。 在包装div上使用位置绝对和与图像的位置相对,然后将其移动到20px工作正常,但当我这样做的时间在div中的其余元素保持下面。有没有办法将其他元素移动到它们是内联的图像?
我已经尝试在这里做了一个简单的jsfiddle: http://jsfiddle.net/ 67stt /
html:
<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
<h2>Header</h2>
</div>
<nav class='menu'>
<ul>
<li>first</li>
<li>second</li>
</ul>
</nav>
</div>
.
css:
.headerContainer {
top: 50px;
background-color: green;
position: absolute;
width: 100%;
}
.logoContainer {
height: 120px;
width: 120px;
background-color: red;
display: inline-block;
position: relative;
top: -20px;
}
.title {
font-style: italic;
display: inline-block;
position: relative;
padding: 0;
}
.menu {
display: inline-block;
position: relative;
}
.
我需要标题和菜单在图像中间排列(红色框)。
使用位置:绝对将它们移动到顶部,该顶部是正常的,但标题和菜单层彼此顶部。
我知道我可以使用它并将菜单带给左边的一些填充,以便它位于标题旁边,但是当页面大小缩小时,菜单在图像和标题下方移动,所以我不希望填充显示然后,我宁愿没有提出一些言辞jQuery的管理方式,如果它只能在CSS中完成。
解决方案
不隶属于 StackOverflow