标签: z-index

给定一个 div，是否有一种优雅的方法来查找该 div 的所有子元素的 z-index 值是否在特定范围内（例如：200-299）。因此，对于给定的示例代码，我需要测试类名为childDivClass 的div和类名为imgClass的图像是否在200到299的 z-index 范围内。

<div class="rootDivClass">
 <div class="childDivClass">
  <img class=imgClass">
  </img>
 </div>
</div>

我有一个无序列表.

<style>
  #button1 { position:relative; z-index: 3; }
  #button2 { position:relative; z-index: 2; }
  #button3 { position:relative; z-index: 1; }
</style>

<ul>
  <li id="button1">Button 1</li>
  <li id="button2">Button 2</li>
  <li id="button3">Button 3</li>
</ul>

我目前正在使用css为每个id赋予不同的z-index,以便一个按钮略微位于下一个按钮之上.我想要做的是使用jQuery添加一个类,它可以为点击的任何按钮添加更高的z-index,例如'999',以确保它将位于其他两个按钮之上.我无法弄清楚如何将活动类添加到当前单击的<li>同时从当前设置的任何按钮中删除活动类.我不知道如何让jQuery弄清楚<li>在按下新按钮之前,其他两个中的哪一个设置了活动类.我该怎么做呢？

此外,我不确定是否添加一个类将解决问题,因为我已经通过定位<li>的id来设置z-index .也许我需要影响当前按下的按钮的内联css,所以它覆盖id的css,并且还检查其他两个中的哪一个将内联css z-index设置为'999',这样它就可以删除它们内联css并具有比其他两个按钮更大的z-index并显示在顶部？

是否有可能有一个绝对定位的透明div覆盖一系列可点击的div？我希望能够将鼠标悬停在下方的红色div上以获得响应.

<style type="text/css">

#holder{
    width:200px;
    height:200px;
}
.clickMe {
    width:100px;
    height:100px;
    cursor:pointer;
    background-color:red;
    border:1px solid black;
    float:left;
    margin:-1px;
    padding:0;
}
.hidey {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    height:50%;
    width:50%;
    opacity:.25;
    background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
</div>

所以我经常遇到这个问题,但直到最近的一个项目确实让我感到非常伤心.

<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>

<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum

基本上情况是这样的:我有一个图像或文本的元素在另一个包含框阴影的元素之前.然后,当我希望第一个元素"在前面"(如果有意义的话)第二个元素的阴影时,框阴影将继续遍历第一个元素.我怎么能这样做？我试过z-index,但那似乎没有用？

我有一个问题,嵌套div被其父div重叠,在这里搜索已经但没有解决方案适合我的问题.

CSS示例:

#content {
    position: relative;
    top: 80px;
    min-height: 530px;
    width: 1000px;
    z-index: 2;
}
#category {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 1;
}

示例HTML:

<div id="content">
    <div id="category"></div>
</div>

应该是什么样的:

嵌套的div #category应该粘在它的右上方,#content并且应该在它后面,这样它#content就会覆盖它.我知道它可能不是处理它的最佳方式,但我需要这样做,因为整个项目的糟糕风格(我只是稍微调整一下).

提前致谢!

所以我的z-index有问题,我的所有对象都有z-index为0,并且当创建新对象时,它们会超出需要在前面的对象.我知道设置z索引命令,但如果我有50个对象,我必须为每个对象编写并手动设置z-index,这有点蹩脚.我怎样才能解决这个问题？这可能很简单,但我是AS3的新手.

我正在尝试设计一个固定的下拉菜单,当我们正在通过较小的视图端口查看时,该菜单会滑动然后位于我的网站的固定标题下.我一定不能正确理解一些东西,因为尽管正确设置位置并且使用低于导航的父级的z-index ,它仍然无法正常工作.在下拉列表中,它会在我创建的菜单按钮下滑动,但是在标题上方,然后保持在标题上方.这是我的代码:

HTML:

<header>
    <div id="menu-button" class="up">menu</div>
    <nav role="primary" class="hide">
        <ul>
            <li><a href="#">foobar</a></li>
            <li><a href="#">foobar</a></li>
            <li><a href="#">foobar</a></li>
            <li><a href="#">foobar</a></li>
            <li><a href="#">foobar</a></li>
            <li><a href="#">foobar</a></li>
        </ul>
    </nav>
</header>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
header {
    display: block;
    float: left;
    width: 100%;
    height: 50px;
    background-color: hsla(0, 0%, 20%, 1);
    box-shadow: 0px 2px 8px #222;
    position: fixed;
    top: 0;
    z-index: 99;
}
#menu-button {
    display: block;
    float: left;
    background-color: hsla(0, 0%, 50%, 1); …

我有一些代码,我支持已tabindex="1.1",tabindex="1.2"等我想改变的值是整数.这会改善浏览器行为吗？

W3C说:

tabindex = 数字 [CN]

此属性指定当前文档的Tab键顺序中当前元素的位置.此值必须是0到32767之间的数字.用户代理应忽略前导零.

它没有说明应该如何处理非整数值.

这篇参考文献说:

数

一个号码.数字必须以连字符或数字开头,并且可以包含小数点.

因此,如果使用小数点,标记是有效的,但它是否有意义？

我的问题是用户代理应该尊重小数点和后面的数字还是只使用整数部分？即,上述两个值应该被视为相同还是不同？为什么你会赞成使用这些值tabindex="11",tabindex="12"等等？z-index也是如此.

我想在按钮点击时更改z-Index.我有一个静态图像和一个动态div.现在我想在静态图像后面发送#imgDiv1.但我不知道该怎么做.我尝试了一切,但都是徒劳的.

这是现场演示.jholo.com我想在这个Web应用程序中实现这个概念.

这是我的标记

<div id="safeZone">
    <img src="default.png" />

    <div id="imgDiv1">
         <img src="myPic.jpg" />
    </div>

</div>

<input id="back" type="button" value="Send To Back"/>
<input id="front" type="button" value="Bring To Front"/>

jQuery的

 $(document).ready(function(){ 

   $("#back").click(function(){
      $("#imgDiv1").css("z-index","-10");
   });

   $("#front").click(function(){
      $("#imgDiv1").css("z-index","10");
   });

});

我已经上传了我的网站，因此您可以看到它的工作原理，还可以在那里查看CSS。它不能完全正常工作，但是问题很明显。http://exampleforso.uw.hu/testvertaboraink.html

我的问题是我无法单击页面上的链接。有人可以帮助我更正我的代码吗？

我还是CSS的新手，所以我的代码可能很混乱或不完整。对于该语言的匈牙利语，我们深表歉意。