将标志往左移动几个像素。

Question

最近我遇到了一个问题，当我试图缩小浏览器时，我的标志会被剪裁。这个问题很容易解决，只需要去掉margin-left {负值;}。现在，我的标志的位置已经到达我想要的位置，但我想向左移动几个像素，但显然不想使用上述属性和值。我尝试过margin-right，但似乎没有起作用。我也想避免使用定位，只专注于使用正常流。在下面的图片中，您可以看到主页导航链接的背景图像与标志重叠。我只想将其向左移动一点。任何帮助都将不胜感激！

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;
}

- gwerd

---

你能否在 HTML/CSS 代码片段或 JSFiddle 上展示一下吗？ - 5ervant - techintel.github.io

你想要达成什么目标？你能提供图片吗？ - 5ervant - techintel.github.io

我刚刚添加了一张图片。主页导航链接的背景图与标志重叠了。我只想把它向左移动一点，但不使用负值或定位。 - gwerd

ov ov然后编辑图像本身！？这个问题变得越来越广泛了！请提供所有必要的部分，以使它变成更小的问题。人们正在猜测您的问题到底是什么。 - sertsedat

@gwerd 请考虑接受答案，以完成您的问答过程，并激励他人回答您的问题。 - Peyman Mohamadpour

Answer 1

我只想把它往左移一点，但不想使用负值或定位。

由于该图像没有计算的左边距，因此您无法将其向左移动而不使用负值。如果要将其向左移动，请使用margin-left: -50px;：

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

我只想把标志往左移动几个像素，这样我的主页导航栏的背景图像就不会重叠了。

如果你想要消除链接重叠的图像，那么你可以将 #nav-bar 的 z-index 设置得比 header 更高，如下所示：

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

这样，#logo 就不会再覆盖 #nav-bar 了。

另外，请将 <p id="logo">...</p> 改为 <div id="logo">...</div>，因为它的内容并不是一个段落。

- 5ervant - techintel.github.io

Answer 2

要将标志向左移动一些像素，您应该在#header中添加position: relative，并将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;
}

- Peyman Mohamadpour

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%;
}

- Keammoort