-1

I have an issue with my css, when I log in or sign out, I have a message that displayed. The issue is that the text is displayed behind another button, to try to solve this, I thought that I could add a z-index an set it to around 20 to be sure it will be over everything but when I applied it, nothing happend and I don't know why. Here is the CSS code:

.alert-success {
  z-index: 20;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert {
  padding: 15px;
  margin-bottom: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
}

and 2 photos for you. enter image description here

hissroth
  • 251
  • 2
  • 17
  • 2
    `z-index` doesn't apply unless the element has a `position` property of something *other* than `static`. – Paulie_D Aug 27 '19 at 11:03

2 Answers2

3

z-index only applies to positioned elements, and yours are not.

Set a position value other than static (you likely want relative as it has the fewest side effects).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

z-index specifies the stack order of an element but z-index only works for positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). Element with greater z-index would always be in front of element with lower z-index.

Mayank
  • 11
  • 3