Question

这个问题已经解决，但由于某种原因，我不能再接受自己问题的答案了两天？

我有一个合理的自举导航，需要为其中一个项目提供图像，我的问题是我可以这样做，但导航的高度会移动以匹配图像的高度，但我需要导航保持大约50px高，并且图像或多或少地覆盖导航 - 例如：

我尝试在列表项中创建一个div作为图像的容器，相对定位并给它一个与图像相同宽度的固定宽度但是列表项覆盖图像：

HTML

<div class="logo-nav">  
    <a href="#">
        <img src="http://placecage.com/c/141/141" alt="">
    </a>
</div>

CSS

.logo-nav {
    position: relative;
    width: 141px;
}
.logo-nav a {
    position: absolute;
}

我无法理解为什么以下列表项不会考虑容器的宽度.logo-nav？

Answer 1

我想你想要这样的东西：http://jsfiddle.net/2vp56uta/2/

感谢CSS3背景属性，您可以轻松解决此问题。但如果您想在页面中放置大量不同的图像，我建议您最好寻找不同的解决方案。

<li><a id="img" href="#"></a></li>

#img {
background:url('http://placecage.com/c/141/141')no-repeat center;
background-size:contain;
}

Answer 2

假设我理解你要完成的任务（我不确定你的“叠加”是什么意思），something like this似乎会做你想要的。

.logo-nav {
  height: 50px;
}

.logo-nav a img {
  height: 100%;
}

您尝试这样做的问题是position: absolute从布局流中取出一个元素，导致页面布局就像那个元素不存在一样。

Answer 3

对不起，我一定不能很好地解释，我希望图像的宽度和高度都是100％，导航器就在后面。虽然我说过虽然我使用边距而不是宽度来解决它，但它会向右推后面的列表项。

.logo-nav {
    position: relative;
    margin-right: 141px;
}
.logo-nav a {
    margin-right: 1px;
}
.logo-nav img {
    position: absolute;
}

Markup现在需要清理并提高效率:)！

感谢大家的回答！