親divのスクロールバーが子divと重複

私はposition: fixedとコンテナのdivを持っており、その中に、私はChromeのみにposition: fixed

でポップアップdiv要素を持っている、コンテナのdivのスクロールバーは、私のポップアップdiv要素と重なります。（添付の画像を参照）

私はポップアップdivからスクロールバーを取り除く助けてください。

編集：問題を説明するためにコードの追加 ：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

出典

2017-05-25 ScrapCode

あなたのコードを共有してください... –

あなたのHTMLマークアップとあなたのCSSとそれに関連するJavaScriptが非常に便利であることが分かったら、そうでなければ、私たちは何もすることはできませんが、それはあなたにとって有用ではありません。（無作為な推測の答えを参照してください...） –

@ MarkSchultheissはコードスニペットを追加しましたが、問題はChromeでのみ発生することを忘れないでください。 – ScrapCode

は#contentのdivの外にあなたのpopupマークアップを貼り付けます。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
    z-index:99; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
</div>

出典

2017-05-25 11:53:59 Bhuwan

それは動作しません！ – ScrapCode

あなたは@commommercial suicideとして '！important 'を使って言いましたか？それ以外の場合は、codepenまたはjsfiddleでコードを共有してください – Bhuwan

がコードスニペットを追加しました。問題はクロムでのみ確認されます – ScrapCode

のみ重複での問題は、あなたがz-index: 999を経由して、それを修正することができた場合：下記のスニペットを確認してください。このようなあなたのポップアップに、このCSSプロパティを与える：

.popup { 
    z-index: 999; // or more 
}

出典

2017-05-25 11:54:43

それは動作しません！ – ScrapCode

'！important'を追加しようとしましたか？このように： 'z-index：999！important;'。それは問題を解決しますか？ –

どちらも助けにならない。 – ScrapCode

これはoverflow-y:scroll;と#contentの位置とそれらがどのように連携して動作に関係しています。 #contentのpostion:fixed;を削除するだけです。その後、コンテナからその位置を取得し、問題を修正する必要があります。

ポップアップではleft: 200px;はセミコロンがありませんでしたが、ここで遊んでいない可能性があります。まあ

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    /* position: fixed;*/ 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

出典

2017-05-25 16:16:16

サイドバーの 'position：fixed'が追加され、ページの右側がスクロールされているときにスクロールされないようにします。したがって、私はそれから固定位置を取り除くことができないことを恐れる。 – ScrapCode

他のブラウザではどのように動作していますか？また、内部に 'video'タグがない場合でもChrome上で動作します。 – ScrapCode

わからない、私はそのブラウザを書いていない。私はちょうどこれが修正を参照してください。 –

あなたはjQueryを使ってクールだ場合は、このような何かを行うことができます。

HTML

<div id="container"> 

<div id="content"> 
    <div id="messages"> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 1 </div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 2 </div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 3</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 4</div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 5</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 6</div> 

    </div> 

</div> 

<div class="popup"> 
    <video class="videoTag" controls> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 
</div>

CSS

html, body { 
    height: 100%; 
} 
body { 
    margin:0; 
} 
#content { 
    position: fixed; 
    top: 5px; 
    left: 0; 
    right: 0; 
    bottom: 5px; 
    width:300px; 
    overflow-y: scroll; 
} 
#messages { 
    overflow: auto; 
} 
#messages .message { 
    height: 79px; 
    background: #999; 
    border-bottom: 1px solid #000; 
} 
.popup { 
    position: fixed; 
    width:250px; 
    height:200px; 
    background-color:red; 
    top: 50px; 
    left: 200px; 
    z-index:99; 
} 
.popup .videoTag { 
    width: 100%; 
    height: 100%; 
}

jQueryの

$(function(){ 
    $(".message").on("click",function(e){ 
    e.preventDefault(); 
    var url = $(this).data("url"); 
    $("video source").attr("src",url); 
    $("video")[0].load(); 
    }) 
})

JSFiddle（あまりにもChromeでの作業;））

https://jsfiddle.net/7bkxez1f/

出典

2017-05-25 19:20:40 Warface

親divのスクロールバーが子divと重複

答えて

関連する問題