By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,276 Members | 2,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,276 IT Pros & Developers. It's quick & easy.

z-index order in Google Chrome

KeredDrahcir
100+
P: 426
I have a box that need to display when the user clicks on a link. I want the background to grey out while the box is active. I found some code to do this using main CSS and little bit of JavaScript.
Expand|Select|Wrap|Line Numbers
  1. <div class="black_overlay" id="fade">
  2.     &nbsp;</div>
Expand|Select|Wrap|Line Numbers
  1. <div style="text-align: center; clear: both;">
  2.     <a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'"><img alt="" border="0" height="228" src="/images/myuimage.jpg" width="225" /></a>
Expand|Select|Wrap|Line Numbers
  1. <div class="white_content" id="light1" style="bacground-color: transparent;">
  2. <a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'"><img alt="Close" border="0" src="/images/close.png" style="position: absolute; right: 0px;" /></a>
  3. my content
  4. </div>
  5.  
Expand|Select|Wrap|Line Numbers
  1.  
  2. .black_overlay{
  3.     display: none;
  4.     position: fixed;
  5.     top: 0%;
  6.     left: 0%;
  7.     width: 100%;
  8.     height: 100%;
  9.     z-index:1001;
  10.     -moz-opacity: 0.8;
  11.     opacity:.80;
  12.     filter: alpha(opacity=80);
  13. }
  14. .white_content {
  15.     display: none;
  16.     position: fixed;
  17.     top: 25%;
  18.     left: 25%;
  19.     width: 567px;
  20.     height: 507px;
  21.     text-align: center;
  22.     padding: 0;
  23.     z-index:1002;
  24.     overflow: auto;
  25. }
I've got no problems in all browsers expect Google Chrome. In Google Chrome, the black appears above the white box even though the white box comes after the black in the code and has a higher z-index.
Aug 29 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.