Wie kann man verhindern, dass ein Pseudo-Element die Breite anderer Elemente ändert?

Question

Ich versuche ein Pseudo-Element als Hintergrundbild zu verwenden, das einfach mit der Breite des Dokuments schneidet. Wenn ich jedoch ein Hintergrundbild einfüge, wird die Breite des Dokuments erweitert, wodurch einige andere divs sehr breit werden.

Insbesondere können Sie aus dem Screenshot sehen, dass das Nav seine Breite erweitert, um das Hintergrundbild des Pseudoelements aufzunehmen.

Mein Versuch:

Ich habe gesehen, es getan, aber ich bin nicht, was der Unterschied ist, wie der Code im eigentlichen Pseudoelement gleich ist. Ein Beispiel:

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

Ich antwortete nur eine sehr ähnliche Frage, die you put a bounty on over here. In diesem Fall denke ich, dass es am besten wäre, entweder eine maximale Breite auf Ihrem Hintergrund-tragenden Pseudo-Element zu erzwingen oder die overflow-x auf Ihrem Dokument zu löschen.

Nachfolgend finden Sie eine snipper Ihrer CSS mit dem fix:

.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 */ 
    } 
} 

Wenn das nicht funktioniert, die schnelle Lösung wäre für diese gehen:

html { 
    overflow-x: hidden; 
} 

ich gesehen habe Manche Leute überbieten es leicht, indem Sie als CSS-Selektoren html, body verwenden, das liegt bei Ihnen.

Answer 2

Geordnetes Element ein position: relative während das Kind-Element verwendet top: 0 und left: 0 verwenden sollten.

So:

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