Question

我正在尝试创建三个重叠div，它们的z-Index使用Javascript动态更改。我选择了div来到堆栈的顶部，但是我无法点击顶部div下方的其他div。有人可以帮我吗？以下是我正在使用的Javascript：

<script>
$(document).ready(function() {
$("div#box").click(function() {
    $(this).css({'z-index' : '9999'});
} , function() {
    $(this).css({'z-index' : '1'});
});
});
</script>

CSS：

 #container{
display: block;
position:relative;
margin: 0px;
padding: 0px;
width: 465px;
height: 350px;
 }

 .redBox {
display: block;
margin: 0px;
padding: 0px;
width: 450px;
border: 1px solid #ED1F24;
z-index: 100;
position: absolute;
top: 120px;
right:0px;
background-color: #FFF;
cursor:pointer;
  }

  .redBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #ED1F24;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #ED1F24;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
margin: 0px;
height: 150px;
padding: 10px 10px 0px 20px;
 }

 .redBox p{
margin:0px;
padding:0px;    
 }

 .redBox .boxFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 5px;
}

.blueBox .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 20px;
 }

 .blueBox {
display: block;
margin: 0px;
padding: 0px;
width: 430px;
border: 1px solid #2B3087;
z-index: 50;
position: absolute;
top: 90px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .blueBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #2B3087;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #2B3087;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
color: #000;
padding: 0px 0px 0px 20px;
margin: 5px 0px;
 }

 .blueBox p strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
color: #000;
 }

 .greenBox {
display: block;
margin: 0px;
padding: 0px;
width: 410px;
border: 1px solid #99CA3C;
z-index: 2;
position: absolute;
top: 60px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .greenBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
background-color: #99CA3C;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  .greenBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #99CA3C;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  #hero {
display: block;
margin: 0px;
padding: 0px;
height: 315px;
width: 465px;
text-align: center;
  }

HTML：

 <td width="50%" rowspan="2" valign="top" style="position:relative;">
 <div id="hero"><img src="images/image.jpg" alt="" width="300" height="315" border="0" />
 </div>
 <div id="container">
 <div class="redBox" id="box">
        <h1>Rewards</h1>
        <ul>
          <li>Text</li>
                      <li>Text</li>
                      <li>Text</li>>
                  <li>Text</li>
                   </ul>
       <h2>Rewards</h2> 
</div>

<div class="blueBox" id="box">
           <h1>Service and Security</h1>
       <p>text</p>
           <p>text</p>
           <p>text</p>
           <<p>text</p>
           <p class="footer">Text</p>
           <h2>Service and Security</h2>    
</div>
<div class="greenBox" id="box">
           <h1>Redeem Rewards</h1>
        <ul>
                <li>text Here</li>
                    <li>text Here</li>
                    <li>text Here</li>
                </ul>
        <h2>Rewards</h2>    
</div>
</div>
</td>

Answer 1

您的代码存在一些问题。首先，您要定位id，它应该是唯一的，不用于识别多个元素。您的代码只会定位id的第一个实例。而是使用类名来定位不同的div。其次，click接受一个参数，一个事件处理程序或两个，其中第一个是事件数据，第二个是处理程序。所以，你的代码只在那里执行第二个函数，并且只对第一个div执行。

请改为尝试：

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").click(function() {
        $(this).css({'z-index': zIndex++ });
    });
});

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 2

我创造了一个工作解决方案的小提琴。如果需要更改元素的z-index，则必须将其position属性设置为“static”以外的任何值。静态是默认值，因此您可以将其更改为“绝对”或“相对”。如果不这样做，浏览器会忽略z-index。此外，当您尝试通过javascript更改CSS属性时，您不能使用'z-index'，javascript使用camelcase作为名称。

这是小提琴的链接： http://jsfiddle.net/vKeqD/

以下是后人的代码：

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").on('click', function() {
        $(this).css({'zIndex' : zIndex++ , 'position': 'absolute'});
    });
});

你也会看到我改变了事件监听器以使用'on'而不是'click'。这只是因为您只以这种方式添加一个事件侦听器，而不是将不同的侦听器附加到每个目标元素。在您的情况下，您只有三个目标。但是，如果你说100，你只附加一个事件监听器而不是100.希望这有帮助。

动态控制的z-Index

2 个答案: