我是 CSS 的新手,有一个我似乎无法弄清楚的问题。所以我刚刚启动了一个 MVC 应用程序,我试图在导航菜单栏上 float 一个 Logo 。我将 Logo 放到了我想要的位置,但现在的问题是导航菜单覆盖了 Logo 的上半部分。无论如何,我可以选择将 Logo 放在栏的顶部吗?
这是我的 _Layout.cshtml 的样子:
<body>
<div style="position: absolute; margin-top: -50px;">
<img src="~/Content/Images/IsabellasLogo.png" />
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Mission", "Mission", "Home")</li>
<li>@Html.ActionLink("Menu", "Menu", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© Isabellas's Pizzeria</p>
</footer>
</div>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
最佳答案
您的导航栏设置为具有 navbar-fixed-top
类,它可能定义了 position:fixed;
。尝试将其更改为 position:relative;
。您可能还需要调整边距,但在没有看到实际 CSS 的情况下很难判断。
另一种选择是保持 position:fixed;
不变,但将 top:0
调整为更大的值,例如 top:50px;
.
关于html - 导航栏覆盖 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25088558/