6

I using Metro css (windows 8 style) and have a problem. I have container with alerts (the blue in the picture) , and above , there is 'IT -CENTER ' , If I click there it open a button. the problem that the button behind the container.. I try to set the Z index of the container to -1 , and it's not help. enter image description here

the dropdownlist with the button(IT-CENTER): IT-CENTER 

              <li style="z-index:3"><a href="Login.aspx">התנתק</a></li>
           </ul>
        </div>

and the container(blue one):

 <div id="alerts-container" style="z-index:-1">
         <div id="toast-example1" class="toast toasttext02 fade in">
            <button type="button" class="close" data-dismiss="alert"></button>
            <div class="pull-left">
               <div class="toast-object icon-info-4"></div>
            </div>
            <div class="toast-body" style="text-align:right">

(it's without the closing tags..)

what should I do?

thanks!!

user3697289
  • 145
  • 1
  • 1
  • 10

2 Answers2

23

  1. You must set position:relative if you are setting z-index - it is very important thing and can lead to your bug

  2. If the 1 method doesn't help you should try to set z-indexes to the possible parents of that button (can say for sure I don't see your code)

CMPS
  • 7,733
  • 4
  • 28
  • 53
AlexTroy
  • 395
  • 2
  • 9
2
overflow: hidden;

to parent DIV worked for me

Azad
  • 5,144
  • 4
  • 28
  • 56
  • 1
    If you could please edit your answer and explain what the code you're showing does, and why/how that code answers the question, it could really help. – Lea Cohen Feb 11 '15 at 10:59