动态控制的 z 索引

Dynamically controlled z-Index

本文关键字：索引 动态控制      更新时间：2023-09-26

我正在尝试创建三个重叠的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>

你的代码有几个问题。首先，您的目标是一个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>

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

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

这是给后人的代码：

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

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

相关文章：