擬似要素が他の要素の幅を変更しないようにする方法はありますか？

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：子要素はtop: 0とleft: 0を使用しながら、

.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

私はちょうどyou put a bounty on over hereことを非常によく似た質問に答えました。この場合、あなたの最善の策は、あなたのバックグラウンドを持つ擬似要素の最大幅を強制するか、overflow-xをドキュメントにドロップすることです。以下は

修正して、あなたのCSSのsnipperです：

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

私が見てきましたCSSセレクタとしてhtml, bodyを使用することで、少し過度に使用される人もいますが、これはあなた次第です。

Answer 2

親要素がposition: relativeを使用する必要があります。このよう

：

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