0

与这里的许多帖子相反，我下面的脚本在 Safari 和 Firefox 中运行良好，但在 Chrome 中运行良好。div“#bg-4-1”应该与页面一起加载，z-index 为 -1000，然后，当单击“h3#bubbleh3”时（我知道，命名失控），z-指数变为 4。

这在其他任何地方都非常有效。我已经把整个东西都包起来了，$(window).load(function()但这并没有改变任何东西。

这是代码：

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                $(".ui-accordion").bind("accordionchange", function(event, ui) {
                  if ($(ui.newHeader).offset() != null) {
                    ui.newHeader, // $ object, activated header
                    $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500);
                  }
                });
             });
            $("h3#bubbleh3").on("click", function(event, ui) {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {
                       $("#bg4-1").css("z-index", "-1000");
                    } else if ($("section#bubble").css("display") === "block") {
                       $("#bg4-1").css("z-index", "4");
                    }
                }, 350);
            });
            $("h3#mermaidh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#thingstellh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#sumpartsh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#knivesh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#redgreenh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#resurrecth3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
        });
    </script>

感谢您的任何见解！

4

2 回答 2

3

是的，这就是这个答案的相同原因。您的方法对非定位元素没有影响，即元素必须是绝对定位、相对定位或固定的。

         <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                 $("#bg4-1").css("display","none");
                $(".ui-accordion").bind("accordionchange", function(event, ui) {
                  if ($(ui.newHeader).offset() != null) {
                    ui.newHeader, // $ object, activated header
                    $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500);
                  }
                });
             });
            $("h3#bubbleh3").on("click", function(event, ui)
             {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {

                       $("#bg4-1").css("z-index", "-1000");
                       $("#bg4-1").css("display","none");
                    } else if ($("section#bubble").css("display") === "block") {
                         $("#bg4-1").css("display","block");
                       $("#bg4-1").css("z-index", "4");
                    }
                }, 350);
            });
            $("h3#mermaidh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#thingstellh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#sumpartsh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#knivesh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#redgreenh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#resurrecth3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
        });

只需更改这些行，它在我的 chrome 中工作正常，检查一下。您可以参考我的博客了解更多关于这些问题的信息。我正在里面写一篇文章

于 2012-12-11T07:04:45.437 回答
0

我已经确认这是这里的交易：z-index not proper rendering on iPad and Google Chrome 22

堆叠上下文。在 Chrome 中，“在文档中的任何位置，任何元素都可以形成堆叠上下文

the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity)

" 在我的例子中，div#bg4-1 位于一个固定的 div 内，因此 kills 能够退到整个页面的后面。Bullocks。

于 2012-12-12T06:34:05.093 回答