标签: z-index

由于Charts.js还不支持注释，所以我在绘制图表后添加了数据点的注释。使用 ctx.fillText 如下所示。

        animation: {
            animateScale: true,
            animateRotate: true,
            onComplete: function () {
                var chartInstance = this.chart,
                    ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.fillStyle = this.chart.config.options.defaultFontColor;
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                    });
                });
            }
        }

除了现在工具提示显示在新添加的文本下方之外，这非常有效。这并不那么明显，但有时它会重叠在一个不好的地方，这意味着您看不到后面的工具提示。

有没有办法设置 ctx.fillText 或工具提示的 z 索引，以便我可以正确地对它们进行分层？

我尝试制作一个图像滑块，当鼠标悬停在一个点上时，它将显示图片。我也尝试通过使用在图像之间切换z-index，但没有任何移动。

.slider {
  counter-reset: index 1000;
}

.slider input[name='slide_switch']:hover+label+img {
  counter-increment: index;
  z-index: counter(index);
}

我有一个iPad应用程序,其中一个"抽屉"表显示在弹出窗口中.用户可以轻触并按住抽屉中的项目以将该项目拖出其中并进入我的主视图.那部分工作正常; 不幸的是,被拖动的视图出现在弹出窗口下方,并且太小而不能被看到,直到它从它下面被拖出.如果我添加视图作为视图控制器的子视图中的酥料饼,它就会被酥料饼的帧被削去,并且我无法访问UIPopoverController的看法,我不能禁用它的图层masksToBounds-和那可能不会无论如何,这是一个好主意.我怀疑我可以使用一个UIWindow具有较高windowLevel值的附加值来强制拖动的视图出现在弹出窗口的顶部,但这看起来有点过分.有更好的解决方案吗？

我在页面中有一个嵌入式YouTube视频.我还有一个菜单(打开时)在该视频的顶部.

我已将菜单的z-index值设置为高于视频的值.我还设置了视频的wmode transparent以允许在其上面的内容.

我在safari中没有遇到任何问题,例如我的计算机上的chrome或firefox(菜单位于视频的顶部,应该如此),但在iPhone和iPad上 - 闪存内容被替换为大可点击的YouTube按钮,用于打开嵌入在youtube应用内的youtube,该大按钮位于菜单上方.有人知道如何解决这个问题吗？

谢谢!

我正在尝试创建一个悬停菜单,但它不起作用.我创建一个菜单并使用高z-index值设置它.然后,我使用javascript生成一个表,但然后我向下滚动表在菜单按钮前面.

编辑:

我只是想让它为FF8工作.

编辑2:

这段代码实际上可行.为了使我的按钮显示在顶部,我只需将我的表z-index设置为-1;

    #blackHead 
    {
        width:100%;
        background-color:White;
    }
    #table
    {
        position:relative;
        width: 40%;
        left: 30%;
        z-index: -1;
    }



    #header
    {
        position: fixed;
        top:3%;
        left:30%;
        width:40%;
        z-index: 100;

    }
    .inv 
    {
        visibility:hidden;
        width:30px;
    }
    .headerButton
    {
        text-decoration:none;
        position:relative;
        font-family:Arial;
        font-weight:bold;
        color:White;
        border: solid 1px  black;
        background-color: Black;
        border-radius: 5px;
        padding: 5px;
        z-index: 101;
    }
    .headerButton:hover
    {
        background-color: White;
        color: Black;
    }
    #myTable {
        position: absolute;
        top:10%;
    }

    #button1
    {
        position: absolute;
        top:0%;
        left:0%;

    }   
    #button2
    {
        position: absolute;
        top:0%; …

我想将这些画布合并到顶部有最大z-index的画布上.

<div id="sketchpad_container">
  <canvas id="sketchypad_layer_0" style="z-index: 20; " width="800" height="600">Your browser does not support canvas</canvas>
  <canvas id="sketchypad_layer_1" style="z-index: 10; " width="800" height="600">Your browser does not support canvas</canvas>
  <canvas id="sketchypad_layer_2" style="z-index: 30; " width="800" height="600">Your browser does not support canvas</canvas>
</div>

给定任意数量的这样的画布层我想按z-index排序,然后使用drawImage将它们组合成一个图像以便导出它.是否有一个简单的按z-index排序？

编辑 - 我按照建议尝试了排序功能,但似乎不起作用.

这是我的控制台输出:

$("#sketchpad_container canvas"); //see what's in the collection
//console output gives back (you'll notice z-indices are 40, 20, 10, 30)
[
  <canvas id=?"sketchypad_interactive_layer" class=?"sketchypad_sketch_layer" style=?"z-index:?40" width=?"800" height=?"600">?Your browser does not support canvas?</canvas>?, 
  <canvas id=?"sketchypad_layer_0" class=?"sketchypad_sketch_layer" style=?"z-index:? …

对不起,我无法发布完整的代码,我正在研究专有的东西.基本上我有一个问题,其中具有z-index 6的DIV被具有z-index为5的覆盖DIV阻止.是否有任何情况会导致这种情况发生？我正在试图弄清楚为什么会发生这种情况.它没有任何意义.position可能与嵌套DIV或CSS 有什么关系吗？

我为模糊而道歉.我试图在JSFiddle中重新创建但不幸的是它按预期工作.只有实际的代码是不可靠的.

结构体:

<div id="window">
    <div id="wall">
        <div class="box" /><div class="box" /> .... many boxes
    </div>
</div>
<div id="overlay" />

CSS:

#window {
    position: relative;
    width: 960px;
    height: 700px;
    overflow: hidden;
    background: #666;
}

#wall {
    position: relative;
    width: 1640px;
    height: 1600px;
    -webkit-perspective: 2000;
}

#overlay {
    position: absolute;
    z-index: 5;
    background: #000;
}

.box {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 228px;
    height: 228px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em; …

我有一个精彩的jquery旋钮的扩展,它将其转换为度数范围输入.在带有负z-index的div内的旋钮上有一个透明的指南针png图像,因此鼠标点击将与旋钮相互作用而不是与img相互作用.

现在,当我将旋钮放在没有背景颜色的div中时,罗盘png显示页面加载的时间.

但是,如果包含div具有背景颜色,则仅在用户开始标记范围后显示png (在紫色圆圈上拖动顺时针范围).

以下是该问题的演示:http://infoxicate.me/testknob.html

编辑:演示页面不再显示问题,因为它已解决...

我在Chrome中遇到了一个奇怪的错误,我的固定导航下拉菜单在悬停时没有正确显示在HTML5视频标签上.如果你检查Firefox它的工作完全没问题,但是Chrome似乎仍然可以隐藏,但仍然可以点击.我已经在下拉列表和视频上尝试了多种可能的解决方案-webkit-backface-visibility,以及旧的Flash/YouTube嵌入式解决方案中可能的wmode =透明属性,但没有任何效果.

可以在以下位置查看问题:

http://spencerfink.net/capers/

注意:我的导航和下拉菜单必须是位置:固定以使它们始终位于页面顶部,无论用户滚动的位置.位置:元素的绝对或相对变化不符合我的需求.

我可以让下拉列表显示在Chrome中的唯一方法是将包含视频的#banner div更改为z-index为-1,但这会干扰页面底部的"联系我"汇总部分以及更多内容z-index shuffling最终将导航栏从页面顶部的固定位置分离.

这个问题也发生在Owl Carousel的页面上,但我认为解决方案类似或相同.

冲突地区的HTML

<div id="navbar">
<a href="index.html"><img src="images/capers-logo.png" height="80px" width="115px"></a>
<a href="index.html" id="capers">Creative<br></a>
<ul id="nav">
    <a href="index.html"><li>Home</li></a>
    <a href="our-work.html"><li id="dropdown">Our Work
        <div id="our-work">
            <ul>
                <a href="marketing-landing.html"><li class="blue">Marketing</li></a>
                <a href="augmented-reality.html"><li id="blue">Augmented Reality</li></a>
                <a href="brand-development.html"><li id="blue">Brand Development</li></a>
                <a href="explainer-videos.html"><li id="blue">Explainer Videos</li></a>
                <a href="entertainment-landing.html"><li class="orange">Entertainment</li></a>
                <a href="animation.html"><li id="orange">Animation</li></a>
                <a href="games-apps.html"><li id="orange">Games/Apps</li></a>
                <a href="creative-design.html"><li id="orange">Creative Design</li></a>
            </ul>
        </div>
    </li></a>
    <a href="#"><li>News</li></a>
    <a href="contact-us.html"><li>Contact Us</li></a>
</ul>
<img id="mobile-icon" onClick="toggleMenu()" src="images/menu.png">
<div id="mobile-menu">
    <ul> …

我试图使用css属性z-index将一个h1元素放在div元素上面,但它不起作用!

这是我的HTML:

<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>

#headerblock有黑色表面,包括一些透明度.我希望h1出现在#headerblock之上.正如我所提到的,z-index属性不起作用.有人有解决方案吗？或者至少是它不起作用的原因？

谢谢.