html - 将 Logo 向左移动几像素

Question

我最近遇到一个问题，当我尝试最小化我的浏览器时，我的 Logo 会被截断。这很容易通过去掉 margin-left{negative-value;} 来解决 现在，我的 Logo 位于我想将其向左移动几个像素但显然不想使用上述属性和值的位置。我尝试了 margin-right 似乎没有用。我也想远离定位，只专注于使用正常流程。在下图中，您可以看到主页导航链接的背景图像与 Logo 重叠。我只想将它移到左边一点 任何帮助表示赞赏!

https://jsfiddle.net/w95n3x0L/2/

<div id="header">
<p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>

#logo img {
width: 320px;
margin-top: -60px;
}

Answer 1

I just want to move it over to the left a bit but without using a negative value or positioning.

您不能在不使用负值的情况下将其向左移动，因为图像没有计算的左边距。只需使用这样的 margin-left: -50px;如果你想把它移到左边:

#logo > img {
  margin-left: -50px;
}

All i want is to move the logo to the left a few px. so the background image of my home navigation isn't overlapping.

如果你想摆脱链接重叠的图像，那么你可以设置 z-index你的#nav-bar高于 z-index你的标题是这样的:

#nav-bar {
  z-index: 1;
}

这样，#logo将与 #nav-bar 重叠没有了。

另请更改<p id="logo">...</p>至 <div id="logo">...</div>因为它的内容没有段落。