首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

根据页面呈现顺序反转z-index

作者：吻过彩虹的脸_378 | 2023-08-08 10:19
如何解决《根据页面呈现顺序反转z-index》经验，为你挑选了3个好方法。

示例标记:


    
Trigger

    
This is some content





    
Trigger

    
This is some content





    
Trigger

    
This is some content

CSS示例:

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

通过javascript(jQuery)我将一个click事件附加到每个h2,然后将内容div切换为display:block.

目的是这些是可扩展的内容块,将与页面上的任何其他内容重叠.

问题是,我希望第一个与第二个重叠,如果所有这些都打开,它将与第三个重叠.

但是,由于每一个都在前一个渲染之后渲染,因此实际的堆叠顺序是相反的(最后一个内容div创建的结尾覆盖了先前创建的一次).

有没有一种聪明的方法来逆转CSS/HTML的这种行为？或者是让页面呈现的解决方案,然后通过javascript,按顺序获取所有内容div并以相反的顺序给它们每个z-index？

更新:

这是一些更具体的标记:

Hello World
    

        
This
is
overlapping

    




Hello World
    

        
This
is
overlapping

    




Hello World
    

        
This
is
overlapping

以下标记将产生3个div,每个div都有一个彩色div重叠.由于渲染顺序,最后一个绝对定位的DIV(红色)将位于它之前的一个(橙色).

我无法弄清楚我需要应用什么类型的z索引才能使FIRST彩色重叠div位于顶部.从z到索引的顶部到底部的顺序应该反映标记(顶部为黄色,底部为红色).

当然,这与标准相反.

我愿意使用javascript来修复这个后期显示,但我仍然在努力寻找我需要通过javascript应用的确切CSS.我可以做的是什么？



1> jamie-wilson..：

所以在这里仍然没有答案,我只是做了类似的事情,即使我的解决方法是100%黑客,如果有其他人来到这个页面,它确实有效!

#nav ul li:nth-child(1) {
        z-index:10; 
    }
    #nav ul li:nth-child(2) {   
        z-index:9;  
    }
    #nav ul li:nth-child(3) {
        z-index:8;  
    }
    #nav ul li:nth-child(4) {   
        z-index:7;  
    }
    #nav ul li:nth-child(5) {
        z-index:6;  
    }
    #nav ul li:nth-child(6) {   
        z-index:5;  
    }

我刚刚拥有它,只要我没有超过10个元素它似乎工作...

用SASS完成这件事 - https://gist.github.com/ssidelnikov/6271776.希望它对某人有用.

2> Dori..：

闪亮的新CSS flexbox技术使这更容易,但缺点是实际内容将被颠倒.这不一定是个大问题,只是在语义上很奇怪.

简而言之:使用以下样式将所有内容包装在容器中:

display: flex;
flex-direction: column-reverse;

有关工作示例,请参阅小提琴(将鼠标悬停在wrapper元素上以查看操作).

如果您不希望每次更新内容时都依赖javascript动态检查z-index,这将非常有用.如果

元素是动态插入的(或任何其他原因无法预先设置特定样式)如果
以相反的顺序插入s,示例中的CSS规则应足以处理z索引.

这是您当前的设置:http: //jsfiddle.net/dJc8N/2/

这是相同的HTML,添加了CSS(注意

标签中的数字):http: //jsfiddle.net/Mjp7S/1/

编辑:

我发布的CSS可能尚未准备好进行复制粘贴.然而,这是:

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-o-flex-direction: column-reverse;
flex-direction: column-reverse;



3> Matthew Leon..：

这是SASS功能的最佳答案:

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}

推荐阅读
devbox
吻过彩虹的脸_378
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有