html - z-index on absolute 无效-6ren

html - z-index on absolute 无效

转载作者：行者123 更新时间：2023-11-28 07:29:34

我正在尝试获得折叠纸效果。

我在页面上做了 2 张脸。

单击(事件)时，我希望在折叠后看到纸张的背面切片。

问题是页面的正面接缝有更大的 Z-index，所以当它折叠时只能看到背面的一小部分。

我需要后切片 b1 和 b2 在事件时具有大于 f2 f3 的索引(具有过渡延迟到接缝自然)。

这是我的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Double Gate Fold</title>
    <script>

        var front = new Image();
        front.src = 'Flyer2pag1.png';

        function scaleSize(maxW, maxH, currW, currH){

            var ratio = currH / currW;

            if(currW >= maxW && ratio <= 1){
                currW = maxW;
                currH = currW * ratio;
            } else if(currH >= maxH && ratio>1){
                currH = maxH;
                currW = currH / ratio;
            }

            return [currW, currH];
        }


        front.onload = function () {

            var frontWidth = this.width;
            var frontHeight = this.height;
            var newSize = scaleSize(1000, 1000, frontWidth, frontHeight);
            frontWidth = newSize[0];
            frontHeight = newSize[1];


            var Dim_View = document.querySelectorAll(".view");
            for (var i = 0; i < Dim_View.length; i++) {
                Dim_View[i].style.width = frontWidth + "px";
                Dim_View[i].style.height = frontHeight + "px";
            }

            var Dim_Slice = document.querySelectorAll(".slice");
            for (var i = 0; i < Dim_Slice.length; i++) {
                Dim_Slice[i].style.width = frontWidth / 4 + "px";

            }
            var Poz_f1 = document.querySelectorAll(".f1");
            for (var i = 0; i < Poz_f1.length; i++) {
                Poz_f1[i].style.backgroundPositionX = '0px';
                Poz_f1[i].style.backgroundPositionY = '0px';
            }
            var Poz_f2 = document.querySelectorAll(".f2");
            for (var i = 0; i < Poz_f2.length; i++) {
                Poz_f2[i].style.backgroundPositionX = +frontWidth * 0.75 + "px";
                Poz_f2[i].style.backgroundPositionY = '0px';
            }

            var Poz_f3 = document.querySelectorAll(".f3");
            for (var i = 0; i < Poz_f3.length; i++) {
                Poz_f3[i].style.backgroundPositionX = +frontWidth * 0.5 + "px";
                Poz_f3[i].style.backgroundPositionY = '0px';
            }
            var Poz_f4 = document.querySelectorAll(".f4");
            for (var i = 0; i < Poz_f4.length; i++) {
                Poz_f4[i].style.backgroundPositionX = +frontWidth * 0.25 + "px";
                Poz_f4[i].style.backgroundPositionY = '0px';
            }
        }

        var back = new Image();
        back.src = 'Flyer2pag2.png';



        back.onload = function () {

           
            var backWidth = this.width;
            var backHeight = this.height;
            var newSize = scaleSize(1000, 1000, backWidth, backHeight);
            backWidth = newSize[0];
            backHeight = newSize[1];


            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
   
            canvas.width = backWidth;
            canvas.height = backHeight;

            context.translate(canvas.width / 2, canvas.height / 2);
            context.scale(-1, 1);

            context.drawImage(back, -back.width / 2, -back.height / 2);

            context.restore();
            context.save();

            setTimeout(function () {
                var dataURL = canvas.toDataURL();
                console.log(dataURL);


                var Poz_b1 = document.querySelectorAll(".b1");
                for (var i = 0; i < Poz_b1.length; i++) {
                    Poz_b1[i].style.backgroundPositionX = '0px';
                    Poz_b1[i].style.backgroundPositionY = '0px';
                    Poz_b1[i].style.backgroundImage = "url('" + dataURL + "')";

                }
                var Poz_b2 = document.querySelectorAll(".b2");
                for (var i = 0; i < Poz_b2.length; i++) {
                    Poz_b2[i].style.backgroundPositionX = +backWidth * 0.75 + "px";
                    Poz_b2[i].style.backgroundPositionY = '0px';
                    Poz_b2[i].style.backgroundImage = "url('" + dataURL + "')";
                }

                var Poz_b3 = document.querySelectorAll(".b3");
                for (var i = 0; i < Poz_b3.length; i++) {
                    Poz_b3[i].style.backgroundPositionX = +backWidth * 0.5 + "px";
                    Poz_b3[i].style.backgroundPositionY = '0px';
                    Poz_b3[i].style.backgroundImage = "url('" + dataURL + "')";
                }
                var Poz_b4 = document.querySelectorAll(".b4");
                for (var i = 0; i < Poz_b3.length; i++) {
                    Poz_b4[i].style.backgroundPositionX = +backWidth * 0.25 + "px";
                    Poz_b4[i].style.backgroundPositionY = '0px';
                    Poz_b4[i].style.backgroundImage = "url('" + dataURL + "')";
                }


            }, 100);





        }
    </script>



    <style>
        .view {
            position:absolute;
            margin-left: 300px;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;
        }
        
        .slice {
            position:absolute;
            background: #ffffff;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            -ms-transform-origin: left center;
            transform-origin: left center;
            -webkit-transition: -webkit-transform 1s ease-in-out;
            -moz-transition: -moz-transform 1s ease-in-out;
            -o-transition: -o-transform 1s ease-in-out;
            -ms-transition: -ms-transform 1s ease-in-out;
            transition: transform 1s ease-in-out;
            -webkit-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .view f1, .view .f2, .view .f3, .view .f4 {
            
            -webkit-transform: translate3d(100%,0,0);
            -moz-transform: translate3d(100%,0,0);
            -o-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0);
        }

        .view .b2, .view .b3, .view .b4 {
          
            -webkit-transform: translate3d(100%,0,0);
            -moz-transform: translate3d(100%,0,0);
            -o-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0);
        }

        .b1, .b2, .b3, .b4 {
            -webkit-backface-visibility: visible;
            -o-backface-visibility: visible;
            -ms-backface-visibility: visible;
            backface-visibility: visible;
        }
       

        /*********************************************
        Folding Front
        *********************************************/


        .RF:active .f1 {
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
        }

        .RF:active .f2 {
            z-index:-5;
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
        }

        .RF:active .f3 {
            z-index:-5;
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
        }

        .RF:active .f4 {
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
        }
       
            .RF:active .b1 {

            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
            z-index:5000;
        }

        .RF:active .b2 {
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
        }

        .RF:active .b3 {
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
        }
      

        .RF:active .b4 {
            -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
            z-index: 5000;
             
        }
        
    </style>
</head>
<body>
    <div class="RB">
        <!--<img src="https://cdn0.iconfinder.com/data/icons/huge-basic-icons-part-3/512/Rotate_3d.png " />-->
        <p>RB</p>

        <div class="RF">
            <!--<img src="https://cdn0.iconfinder.com/data/icons/huge-basic-icons-part-3/512/Rotate_3d.png" />-->

            <p>RF</p>

            <div class="view">
                <div class=" slice b1" style="background-size: cover;">
                    <div class="slice b2" style="background-size: cover;">
                        <div class="slice b3" style="background-size: cover;">
                            <div class="slice b4" style="background-size: cover;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="view">
                <div class=" slice f1" style="background-image: url(Flyer2pag1.png); background-size: cover;">
                    <div class="slice f2 " style="background-image: url(Flyer2pag1.png); background-size: cover;">
                        <div class="slice f3 " style="background-image: url(Flyer2pag1.png); background-size: cover; ">
                            <div class="slice f4 " style="background-image: url(Flyer2pag1.png); background-size: cover; ">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            

        </div>
    </div>

    
   
    <canvas id="myCanvas" style="background:#0094ff;display:none;"></canvas>

    
</body>
</html>

最佳答案

据我了解，问题是 z-index 没有按照您期望的方式工作。我怀疑这是因为你在控制每个 child 的 z-index。即，“f”的子项比“b”的子项具有更高的索引，但“f”中的子项仍落后于或未覆盖“b”容器。

这是因为在该级别，您将需要在翻阅页面时将 z-index 应用于父容器。这是一个可能比我的胡言乱语更好解释的例子:

fiddle :https://jsfiddle.net/bfbddn70/

html:

<div id="top-parent">
  <div class="pages b">
    <div class="b1">
       content
    </div>
  </div>
  <div class="pages f">
    <div class="f1">
        content
    </div>
   </div>
</div>

CSS:

#top-parent {
    height: 300px;
    width: 300px;
    background: grey;
}

.pages {
    position: absolute;
    height: 100px;
    width: 100px;
}

.pages.b {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10;
}

.pages.f {    
    position: absolute;
    z-index: 1;
}

.b1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #eee;      
}

/**
 * notice that the nested elements don't interact with each other 
 * the grey page is still above the white page even though the white 
 * page has a higher z-index. This is because at the level in which they are
 * visually interacting, the parent container `.pages.b` is has a higher z-index
 * than the parent container `.pages.f`
*/
.f1 {
  position: absolute;
  z-index: 100000;
  width: 100%;
  height: 100%;
  background: white;      
}

关于html - z-index on absolute 无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31609542/

文章推荐： ios - CollectionView 在动画过程中切断单元格

文章推荐： c++ - mongodb内存泄漏通过C++驱动程序插入文档

文章推荐： html - 用于类似表格布局的最佳 HTML/CSS 模型

java - 为什么 `index = index++` 不增加 `index` ？
这个问题已经有答案了: 已关闭14 年前。 ** 重复:What's the difference between X = X++; vs X++;? ** 所以，即使我知道你永远不会在代码中真正做到
c - 这条语句背后的逻辑是什么: for (--index; index >= 0; --index)?
我在一本C语言的书上找到了这个例子。此代码转换输入数字基数并将其存储在数组中。 #include int main(void) { const char base_digits[16] =
flutter - 未处理的异常 : RangeError (index): Index out of range: index should be less than
尝试使用“pdf_dart”库保存 pdf 时遇到问题。我认为问题与我从互联网下载以尝试附加到 pdf 的图像有关，但我不确定它是什么。代码 import 'dart:io'; import 'p
linux - 访问某些 index.php 或 index.html 时出现 Apache 403 错误，尽管每个 index.php 或 index.html 具有相似的权限
我的 Apache 服务器曾经可以正常工作，但它随机开始对几乎每个目录发出 403 错误。两个目录仍然有效，我怎样才能使/srv/www/htdocs 中的所有目录正常工作？我查看了两个可用目录的权
PHP 数组索引 : $array[$index] vs $array ["$index"] vs $array ["{$index}"]
这些索引到 PHP 数组的方法之间有什么区别(如果有的话): $array[$index] $array["$index"] $array["{$index}"] 我对性能和功能上的差异都感兴趣。更
indexing - 实现 Index 特征以返回一个不是引用的值
我有一个简单的结构，我想为其实现 Index，但作为 Rust 的新手，我在借用检查器方面遇到了很多麻烦。我的结构非常简单，我想让它存储一个开始值和步长值，然后当被 usize 索引时它应该返回 st
indexing - marklogic 中的 element-range-index 和 field-range-index 有什么区别？
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。请借助示例来解释差异。最佳答案这两个都是标量索引:特定类型的基于值的排序
indexing - marklogic 中的 element-range-index 和 field-range-index 有什么区别？
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。请借助示例来解释差异。最佳答案这两个都是标量索引:特定类型的基于值的排序
python - Pandas .at 抛出 ValueError : At based indexing on an integer index can only have integer indexers
所以我有一个 df，我在其中提取一个值以将其存储在另一个 df 中: import pandas as pd # Create data set d = {'foo':[100, 111, 222],
php - ci : google indexing address with index. php 但站点中没有与 index.php 的链接
我有一个由 codeigniter 编写的网站，我已经通过 htaccess 从地址中删除了 index.php RewriteCond $1 !^(index\.php|resources|robo
sql - MySQL: `... ADD INDEX(a); ... ADD INDEX(b);` 和 `... ADD INDEX(a,b);` 之间的区别？
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
javascript - Firefox 上的嵌套 z-index 问题，较高的 z-index 落后于较低的 z-index
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题，我有一个 div，z-index 为 30000，位于 label 下方> zindex 为 9000。我认为这是由 z-inde
c++ - 如果 index == 0，为什么 v [index] < v [index - 1] 返回 true？
Link to the function image编写了一个函数来查找中枢元素(起始/最低)的索引排序和旋转数组。我解决了这个问题并正在检查边缘情况，它甚至适用于索引为零的情况。任何人都可以解
python - 类型错误 : cannot perform __sub__ with this index type:
我正在尝试运行有关成人人口普查数据的示例代码。当我运行这段代码时: X_train, X_test, y_train, y_test = cross_validation.train_test_spl
apache - 如何 htaccess 将 index.html 重定向到 index.php 并将 index.php 重定向到/
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点，然后还进行重写以强制 foo.com/index.php 成为 foo.com/
apache - 如何 htaccess 将 index.html 重定向到 index.php 并将 index.php 重定向到/
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点，然后还进行重写以强制 foo.com/index.php 成为 foo.com/
python - <类 'pandas.indexes.numeric.Int64Index'> 的类型错误 : cannot do slice indexing on with these indexers [(2, )]
我有一个用户定义的函数，如下所示:- def genre(option,option_type,*limit): option_based = rank_data.loc[rank_data[
python - 减去索引 - TypeError : cannot perform __sub__ with this index type:
我有两个巨大的数据框我正在合并它们，但我不想有重复的列，因此我通过减去它们来选择列: cols_to_use=df_fin.columns-df_peers.columns.difference(['
javascript - 如何在 React Native 中使用 index.js 而不是 (index.ios.js, index.android.js) 进行跨平台应用程序？
感谢您从现在开始的回答，我是React Native的新手，我想做一个跨平台的应用所以我创建了index.js: import React from 'react'; import { Co
indexing - Field.Index.NOT_ANALYZED_NO_NORMS 是什么意思
我知道 not_analyzed 是什么意思。简而言之，该字段不会被指定的分析器标记化。然而，什么是 NO_NORMS 方法？我看到了文档，但请用简单的英语解释我。什么是索引时间字段和文档提升和字段

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - z-index on absolute 无效

fiddle :https://jsfiddle.net/bfbddn70/

html:

CSS: