0

Context: I am trying to solve an issue as mention here: https://github.com/likeastore/ngDialog/issues/94

Problem: Open plnkr: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview and try to hold and drag scrollbar with mouse. The scrollbar on the parent container is not usable with mouse. Incidentally, what is happening is that the position:fixed div.overlay is overlapping with the scrollbar of its parent container.

HTML:

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    <div>I'm large 1</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
  </div>
</div>

CSS

.container{
    position: fixed;
    overflow: auto;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;  
    padding: 160px;
}

.container .overlay{
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.container .content{
    background: #f0f0f0;
    border-radius: 5px;
    max-width: 100%;
    position: relative;
}
monish001
  • 671
  • 2
  • 8
  • 20

1 Answers1

0

I think you should change HTML to be

<div class="overlay"></div>
<div class="container">
  <div class="content">
  </div>
</div>
</div>

Don't forget to change css. http://plnkr.co/edit/QsQBk5oJfWuCymBwUtYB?p=preview

ZyXEL
  • 163
  • 1
  • 12
  • Thanks ZyXEL. That's a good idea but I need to do it with CSS, if it is possible. – monish001 Sep 23 '15 at 12:13
  • [http://stackoverflow.com/questions/25639774/fixed-div-overlaps-scrollbar-of-static-div](http://stackoverflow.com/questions/25639774/fixed-div-overlaps-scrollbar-of-static-div). I think it is similar question to yours. It looks like it can't be done using only css. – ZyXEL Sep 23 '15 at 12:45