Modal opens superimposed by black background

Question

My modals are opening up under the black bottom, like this:

In case I take the z-index:1040 from the code below, the black background:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

However I would like it to open normally, with the black background underneath the modal.

Answer 1

Translation of the main answer of this question soen:

This behavior occurs when the modal has a fixed or relative position, or is inside an element with a fixed or relative position.

Make sure that modal and all of its parent elements are positioned in the standard way to solve the problem.

Here are some ways to do this:

1. The easiest way is to simply move the div modal out of any elements with special positioning. A good place can be just before the closing tag </body>.

2. Alternatively, you can remove the positions: the modal CSS properties and inherited (I was in doubt here in the translation...), until the problem disappears. However, this can change the appearance of the page.

update

And has a another answer below, which may help, for what you described in the question:

...

What worked: I named the z-index of .modal-backdrop for -1.

.modal-backdrop {
  z-index: -1;
}

Answer 2

I was in the same trouble but I figured out what it is, in which case there’s some div or ul or li or any other element with position:absolute; in the css that’s making this fund overlap , so you have to create a new rule with position:static; to release the position as all static.

Example:

<style>
.dropdown-menu {
position:static !important; //aki faz funcionar o madal e so por estatic

}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}