将徽标向左移动几个px

Question

我最近遇到了一个问题，当我尝试最小化浏览器时，我的徽标会被切断。通过取走margin-left {negative-value;}很容易解决这个问题。现在，我的徽标位于我想要向左移动几个px的位置，但显然不想使用上面的属性和值。我尝试了边缘权利，似乎没有用。我也希望保持定位，只关注使用正常流量。在下图中，您可以看到主导航链接的背景图像与徽标重叠。我只是想把它移到左边一点任何帮助赞赏！

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

  

我只是想将它向左移动一点但不使用   负值或定位。

由于图片没有计算左边距，因此无法使用负值将其向左移动。如果你想将它移到左边，只需使用margin-left: -50px;：

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

  

我想要的只是将徽标向左移动几个px。所以背景   我家导航的图像并不重叠。

如果您想摆脱链接重叠的图片，那么您可以设置z-index的{​​{1}}高于标题的#nav-bar，如下所示：

z-index

这样，#nav-bar { z-index: 1; } 将不再与#logo重叠。

另请将#nav-bar更改为<p id="logo">...</p>，因为其内容没有段落。

Answer 2

要将徽标向左移动一些像素，您应该将position: relative添加到#header并将logo置于绝对位置，如下所示：

（请从您的徽标部分删除p标记，如下所示）：

<强> HTML

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

<强> CSS

#header{
    position: relative;
}
#logo{
    position: absolute;
    width: 320px;
    height: 100px;
    top: 60px;
    left: -10px;
}

Answer 3

如果这不是问题，您可以随时裁剪源图像。但如果您不想这样做，您可以将图像设置为背景并将其移动一点：

<p id="logo"></p>

并应用此CSS：

p#logo {
    height: 154px;
    width: 320px;
    background-image: url('http://i.imgur.com/UwpTOvm.png');
    background-repeat: no-repeat;
    background-position-x: -25px; /*move it to the left*/
    background-size: 100%;
}