标签: z-index

我有一个元素,其位置是固定的,并且z-index = 5.当我调整浏览器大小时,此元素出现在(静态定位)元素的前面,其z-index = 10,这不是我期望的行为.

如果你想看看我的意思,打开这个页面并缩小浏览器窗口,直到"Chalets des Bouleaux"标志在照片上方(前者的z-index = 5,后者的z-index = 10).

谢谢,唐

首先,我是程序员(Python,C,Java,Delphi等),而不是Web开发人员/设计师.我很努力(当被问到时)所以请耐心等待.:-)

我有一张地图(div的背景图片).在地图上我放置了一些城市(div与图像).在城市下面有汽车(div也有图像).每辆车都可以前往任何一个城市(拖放,我现在正在努力).点击一次时,城市和汽车会显示带有额外信息的弹出对话框.

到此为止,没有新闻.普通程序员想要的是将地图放在下一个(即z-index 10)汽车的第一级(即z-index 0)城市上(z-index 20因为当拖放的汽车应该出现时)在城市之上而不是在下面)并且最后是所有弹出窗口(z-index 999).

然而,这种情况并非如此.汽车在某些城市上方"飞行"并在其他城市之下"通过"(取决于它们是在城市之前还是之后放置,而我们在渲染页面时).

我正在努力在地图div和城市之间放置一个div(绘制线条)(即z-index 5),但无济于事.

弹出窗口也有问题.

我也试过这段代码:

jQuery(document).ready(function(){
   map_zindex = $("#map").css("z-index");
   $(".city").css("z-index", map_zindex+10);
   $(".car").css("z-index", map_zindex+100);
   $(".popup").css("z-index", map_zindex+200);
}); 

仍然没有任何变化(甚至没有一点点进展).没有.最糟糕的是,在使用Firebug进行检查时,我得到了z-index: auto;所有这些元素.

我知道我必须做一些完全错误的事情,但它是什么？我希望我对CSS的厌恶不会导致所有这些混乱.

我正在研究这个网站

除狗外,大部分都很好."宠物友好产品"正如你所看到的那样,他坐在图形下面,栅栏上.所以颜色重叠已经过去了.我理想地需要狗坐在那层之上.

有关如何实现这一目标的任何建议？

提前致谢.

在我的页面中,我有不同的菜单项,可以触发不同的相应图片.将z-index相应的图片切换到顶部.这是代码:

$(document).ready(function(){

var doorOpen = false;

$("a[href=#andrew]").click(function() {

    if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
        var duration = 1500;
    } else {
        var duration = 0;
    }

    $("#rightdoor,#leftdoor").animate(
        {"marginLeft":"0px"},
        {duration:duration,
            complete:function() {
                $('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1);  //puts wrong pics in back
                $('.pic1').css('zIndex', 2);  //brings right pic into view
                $('#rightdoor').animate({  //opens doors again
                 marginLeft: "150px",
                }, 1500);
                $('#leftdoor').animate({
                 marginLeft: "-150px",
                }, 1500);
            }
        } …

.PopBgd是屏幕大小的100%,另一个div .PopUp包含在.PopBgd中并出现在它上面.单击.PopBgd可获得所需的隐藏效果.但是,单击PopUp中的任何位置也会运行下面脚本的fadeOut部分.

问题 如何阻止脚本的fadeOut部分通过覆盖div来触发？

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
    $('.PopClose, .PopBgd').click(function() {
    $('.PopBgd').fadeOut();});
});

回答

<button type="button" class="BtnPop" data-popup=".Pop1">CLICK</button>

<div class="Pop1 PopBgd">
  <div class="PopUp">
    <a class="PopClose">&#215;</a>
    <div>Content</div>
  </div>
</div>

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});

$('.PopUp').click(function(e) {
    e.stopPropagation();
});

新问题 如果目标div的名称未知,如何使用StopPropogation？我上面尝试过的东西不起作用.

我通过简单地向所需的div添加一个静态的第二个类名来解决我的附加问题,以允许stopPropogation正常工作.

它是如何工作的:

$("#linechart").css({
      position:'fixed',
      top: "4%",
      left: "2%",
      height: "92%",
      width: "96%"
  });

这打破了所有的javascript:

$("#linechart").css({
      position:'fixed',
      top: "4%",
      left: "2%",
      height: "92%",
      width: "96%",
      z-index: "5"
  });

Codepen:http://codepen.io/marcoms/pen/vAgep/

上面的笔有一个<nav>带有下拉列表的栏,其层次结构如下:

nav > ul.nav-list > li.parent > ul  /* ul: dropdown list */

随后<p>隐藏下拉列表,这是不需要的,我无法弄清楚如何阻止它.

奇怪的是,如果{-webkit-,-moz-,...}transform应用了a ,那么下拉列表会自己堆叠在上面<p>.(粘-webkit-transform: translateX(0)在笔上看,这几乎肯定是一个错误,但我不知道我能做些什么来解决这个问题,除了改变display和z-indexes.

我有两个div,我想把它们放在另一个上面,所以我可以在我正在创建的applet中创建一个tab系统.这两个div位于父div中,它使用auto height,因为我不知道其他两个div的确切高度(两个子节点的高度相同).当父级使用相对定位时,我可以使用绝对定位将两个div放在另一个上面,但是自动高度不响应(很可能是因为绝对定位的子级)创建空div的边界线而不是里面的元素包装.

看这里的问题:http://jsfiddle.net/h5bjt69s/

<div id = "parent">
    <div id = "redDiv"></div>
    <div class = "clearfix"></div>
    <div id = "blueDiv"></div>
</div>

我尝试从这个建模解决方案,但我相信自动高度抛出了一些东西. 位置绝对但相对于父级

如何用父div包装两个div并仍然保持两个孩子的重叠？

我 在Web应用程序上从http://gridviewscroll.aspcity.idv.tw/Demo.aspx#Freeze实现了gridviewscroll，但是菜单似乎隐藏在gridview的后面，如下图所示：

在其他网络表单上，实际菜单如下所示：

我的问题是如何将gridview发送到后面，或者如何解决该问题？

PS：如果您需要任何代码来澄清问题，请问我。

它在其他GridView上效果很好，我尝试增加z-index，但不起作用。

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }
    nav ul {
    background: #FFF4D5; 
    background: linear-gradient(top, #FFF4D5 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #FFF4D5 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;

}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
    float: left;
} …

我在Chrome上遇到了一个奇怪的"错误",其中z-index没有像其他所有浏览器(包括IE)那样正常显示.

我已经阅读了与之相关的所有相关问题,而且他们的问题中几乎每个人都缺少位置或溢出.

该网站的链接是这个,中间搜索有一个下拉ul元素,当你点击它时,它是在图片后面.我已经尝试了几个小时所有可能的组合与子父母,不同的z索引,位置,似乎没有任何东西得到图片前面的下拉菜单.

如果有人能指出我正确的方向或提供样本来帮助我,我将非常感激.

谢谢!

来自答案的解决方案:有问题的div元素在它上面有大约10个div元素作为"父母".他的z-index无法进入前线,因为他的最高父母没有位置:相对,只有z-index导致问题低于它的所有其他子div.

这是一个例子:

<div>      <---- had only z-index, was missing position:relative
  <div>
    <div>
       <div>   <---- this div with z-index could not get in front because of the first one
       </div>
    </div>
  </div>
</div>