如何阻止伪元素改变其他元素的宽度？

Question

我正在尝试将一个伪元素作为背景图像，它只是按文档的宽度裁剪。但是，当我在其中放置背景图像时，它会不断扩大文档的宽度，使其他一些 div 变得非常宽。

具体来说，您可以从屏幕截图中看到导航正在扩展其宽度以容纳伪元素的背景图像。

我的尝试：

我已经看到了，但不知道有什么区别，因为实际伪元素中的代码是相同的。一个例子：

HTML:

    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container nav-down">
            <div class="navbar-header page-scroll">
                <a class="navbar-brand" href="/"><img src="/static/ScoopsLogo.png" alt="${out.global.siteName} Logo"></a>
                <p class="navbar-blog"><a href="https://blog.scoops.io/">Blog</a></p>
            </div>
        </div>
        <div id="scroll-progress">
            <div id="scroll-progress-bar"></div>
        </div>
    </nav>
    <section id="home">
        <div class="home-1">
          <div class="home1-1">
            <h1>Sound smart at the dinner table</h1>
            <h5>Learning made easy & fun</h5>
          </div>
        </div>
        <div class="home-lessons fade-in-up-static delay-2">
            <!-- List of Lessons -->
            <h5 class="text-center">NEW SCOOPS</h5>
            <div class="lessons-list">
            </div>
        </div>
     </section>

CSS:

.navbar {
    min-height: 50px;
    margin-bottom: 20px;
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.container {
    max-width: 600px;
}
.navbar-custom {
    .navbar-header {
      width: inherit;
      max-width: inherit;
    }
    .navbar-brand {
        img {
          width: auto;
          height: 100%;
        }
    }
    .navbar-blog {
      float: right;
      padding: 10px;
      margin: 3px 10px 0 0;
    }
}
.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
    }
  }

Answer 1

父元素应使用 position: relative，而子元素应使用 top: 0 和 left: 0。

像这样：

.parent {
    position: relative;
}
.child {
    top: 0;
    left: 0;
}

Answer 2

我刚刚回答了一个与 you put a bounty on over here 非常相似的问题。在这种情况下，我认为您最好的选择是在携带背景的伪元素上强制执行最大宽度，或者在文档中删除 overflow-x。

下面是你的 CSS 的截图，修复了：

.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
      max-width: calc(100% - 200px); /* HERE IS THE FIX */
    }
}

如果这不起作用，快速解决方法是：

html {
    overflow-x: hidden;
}

我看到有些人通过使用 html, body 作为他们的 CSS 选择器稍微矫枉过正，这取决于你。

如何阻止伪元素改变其他元素的宽度？

How to stop a pseudo element from changing the width of other elements?

html

css

css-position

background-image

pseudo-element