Using fixed with modal


#1

I have created a button that when you click it, it opens a small text bubble that should be closed when you click anywhere.
The CSS used for the ‘Click anywhere’ looks like this:

.tooltip-background {
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

This works fine anywhere, except inside the modal. For now I found a work around, but I would like to understand why this is happening.
Work-around:

  //needed for modal
  width-min: 640px;
  height-min: 600px;

#2

Could you put together a codepen demo for this?


#3

Seems the problem was related to adding multiple anchor tags in a column:

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

Once I replaced the whole column system the bug disappeared.