css - 如何将我的网站 Logo 移到容器的左侧

Question

我试图将我的网站 Logo 移到左侧，但当我使用负边距时， Logo 会消失在列后面。

我用 Photoshop 制作了想要的结果:

这是网站网址:https://designthinkingworkshop.nl/

我尝试将 z-index 与负 margin-left 和 overflow visivle 结合使用，但我无法将 Logo 放在旁边的列的顶部。

Answer 1

在不做任何大的改变的情况下，这可以通过移除容器上的 15px padding 来实现:

.container {
  padding-left: 0;
}

如果 Logo 与边框齐平很重要，您可以在其上使用负边距:

.header-logo.logo-image img {
  margin-left: -1px;
}

有很多其他方法可以达到同样的目的，包括重做标题部分。我不喜欢这里的布局，它可能会更简洁。

此外，我确定您是否在页面上使用了任何动画或过渡效果，但是查看您的页面导致我的浏览器进程的 CPU 使用率持续大幅增加。