如何将网站徽标移到容器外部的左侧

Question

我试图将网站徽标向左移动，但是当我使用负边距时，徽标会消失在列的后面。

我已经完成了期望的结果：

https://codesandbox.io/s/lk60yj307

这是网站URL：

我已经尝试将z-index与左负边距和溢出可见光结合使用，但是我无法在徽标旁边的列顶部找到徽标。

Answer 1

无需进行任何大的更改，就可以通过删除容器上的15px填充来实现：

.container {
  padding-left: 0;
}

如果徽标与边框齐平很重要，则可以在其上使用负边距：

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

还有许多其他方法可以实现相同目的，包括重做标题部分。我不喜欢这里的布局，可能会更干净。

此外，我可以确定您在页面上使用的是动画效果还是过渡效果，但是查看页面会导致我的浏览器进程CPU使用率持续大幅度提高。