标签: z-index

如何在文档中获取(带有)最高CSS z-index的元素？

问题再简单了.z-index值由style=...或className由Javascript 分配.我认为这不重要.如何找到(使用Javascript)最高的z-index？(它使用的元素会很好,但不是必需的.)

您不能使用(新)querySelector,因为它不查询CSS值.有没有办法查询CSS？(不是样式表,而是实际使用的值.)

GRAZI

javascript css z-index stylesheet

Rud*_*die

lucky-day

5
推荐指数

1
解决办法

6200
查看次数

Z-index没有在三星Galaxy标签上工作？

我在这个工作项目上工作,在三星星系标签上播放电子学习.游戏只是一个网站,但将显示为应用程序.

当您第一次登录时,您会看到一条带有此欢迎信息的弹出窗口,其后面是带有透明度的黑色叠加层.

问题是在PC上虽然在Firefox上一切都很好但在平板电脑上Z-index似乎不起作用.它无法调试,我无法找到有关此问题的任何文档.那么有人知道z-index在平板电脑上的工作方式是否有所不同,或者如何解决？

弹出窗口有z-index 999,叠加层是z-index 998,有什么想法？我将继续搜索谷歌,并将发布我所做的所有进展.

编辑:将在Jquery中创建叠加层:var showPopup ='<%= ViewData("showPopup").toString()%>'

if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }

Run Code Online (Sandbox Code Playgroud)

现在解决,请参阅解决方案的评论.

html css android z-index galaxy-tab

Teu*_*onk

2011 11-28

5
推荐指数

2
解决办法

7288
查看次数

IE8:z-index之后

我已经看到了大量的例子来修复IE8的z-index疯狂,但在这种情况下它们似乎都没有帮助我.

我正在设计基于UL/LI的"面包屑"布局,图形上每个面包屑可以具有3种不同背景颜色中的一种,每种颜色都有一个"倾斜的端盖".除了IE8之外,它的外观如何:

在此输入图像描述

我们最初的天真但工作的实现在面包屑之间添加了非语义标记和每个可能的重叠对的图像 - 当crumb-classes改变时,有一组复杂的类和JS选择了9种组合.啊.我想尝试另一种基于伪元素的解决方案,这些伪元素将碎屑重叠到右边,这样我们就可以抛弃所有"分隔符"的东西和逻辑.

我的HTML看起来像这样:

<ul class="breadcrumbs">
    <li class="positive">positive</li>
    <li>default</li>
    <li class="positive">positive</li>
    <li class="negative">negative</li>
    <li>default</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

我不会用填充物和背景给你烦恼,这样就足以说每个背景都是重复的条子 - 默认(没有类)是灰色,正面是绿色,负面是红色.对于每个默认/正/负,都有一个倾斜的图像.

这是一些CSS:

    ul.breadcrumbs
    {
        display: block;
        clear: both;
        position: relative;
        z-index: 10;
    }
    ul.breadcrumbs li
    {
        display: block;
        float: left; 
        position: relative;
        ...height,width,padding,etc.etc...
        background: url(sprite-x.png) repeat-x 0 -216px;
    }
    ul.breadcrumbs li.negative { background-position: 0 -243px; }
    ul.breadcrumbs li.positive { background-position: 0 -323px; }

Run Code Online (Sandbox Code Playgroud)

那给我带来了正确颜色的面包屑.现在对于倾斜:

    ul.breadcrumbs li:after
    {
        content: "";
        display: block;
        position: absolute;
        top: 0; left: 100%;
        width: 24px;
        height: 100%; …

Run Code Online (Sandbox Code Playgroud)

css z-index internet-explorer-8 pseudo-element

n8w*_*wrl

lucky-day

5
推荐指数

2
解决办法

3282
查看次数

继续将元素转换为其他元素

我正在学习使用CSS3 3D变换,但是我无法保留在所有其他元素之上转换的元素.

这是我到目前为止:http://bos.rggwebdesigns.com/

如您所见,该站点遵循三个.row div的层次结构的标准z-index规则,这意味着第一行中的卡位于第二行中的卡后面,依此类推.

我尝试在变换脚本中添加行(在main.js中),它选择单击的.card元素上方的.row元素并将其z-index设置为1000,但这似乎不起作用.

$(document).ready(function() {
    $('.card').click(function() {
        $('.row').removeClass('top');
        $('.card').not(this).removeClass('flipped');
        $(this).parents().eq(2).toggleClass('top');
        $(this).toggleClass('flipped');
    })
});

Run Code Online (Sandbox Code Playgroud)

重申一下,我正在努力确保转换元素的所有部分始终显示在每个其他元素之上.

jquery jquery-ui transform z-index css3

Bob*_*obe

lucky-day

5
推荐指数

1
解决办法

333
查看次数

Android上的Chrome不尊重链接点击的z-index

HTML

<div class="container">

    <div class="child">
        <a href="http://www.google.com" target="_blank">Google</a>
    </div>
</div>
<a href="http://www.yahoo.com" target="_blank" class="y">Yahoo</a>

Run Code Online (Sandbox Code Playgroud)

CSS

.container{position: relative;display: block;width: 100px;height: 30px;background: #000;z-index: 7;}
.child{position: absolute;width: 100px;height: 100px;background: #CCC;padding-top: 30px;z-index:9;top: -999px;}
.child a{display: block;}
.container:hover .child{display: block;top: 0;}
.y{z-index: 6;}

Run Code Online (Sandbox Code Playgroud)

工作示例:http://jsfiddle.net/DemjR/6/

我已经在上面的例子中创建了CSS悬停菜单(在链接中),奇怪的是它没有工作,因为它假设在android设备中的chrome(v 25.0.1364.123).但它在我测试的其他所有设备中都能正常工作(ios,windows,mac等..)

问题是(在android中):当你将鼠标悬停在黑匣子上时,会出现一个灰色的div,里面有一个链接(google.com).

当您点击该链接时,它实际上会触发后面的链接(yahoo.com)而不是(google.com)

这是Android设备中的chrome bug吗？

提前致谢

css mobile android google-chrome z-index

Kul*_*ary

2013 03-05

5
推荐指数

1
解决办法

2827
查看次数

如何防止具有更高z-index捕获事件的html元素

我正在开发一个小的chrome扩展,以允许用户看到他/她正在键入的内容.它是一个简单的半透明浮动div元素.我遇到的问题是它下面的html元素没有收到点击事件,因为div元素超过它们(> z-index).

我的问题是:有没有办法让我的div对于点击事件(和其他类型的事件)"透明"？

一个图像: 在此输入图像描述

html javascript z-index javascript-events

lon*_*ero

lucky-day

5
推荐指数

1
解决办法

997
查看次数

Z-index绝对定位背景图像

我想将Wrapper-Top层放在另一层之上.我设置了Z-index和position,这应该足够了.我错过了什么吗？这是网站:提前谢谢你.

编辑:这是我使用的代码:

<body>
  <div class="Wrapper-Top">
  </div>
  <div class="Wrapper-Middle">
  hjklhjkhkjlhjkl
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

css z-index css-position background-image

use*_*401

2019 07-19

5
推荐指数

1
解决办法

1万
查看次数

z-index和堆叠; 从堆叠上下文中删除子项

我正在尝试调整某些元素的堆叠顺序; 这是一个SSCCE.

鉴于此HTML代码段:

<div id="block1">
    <div>Lorem ipsum dolor.</div>
    <div id="widget">
        <div>Widgety goodness!</div>
    </div>
</div>
<div id="block2">
    <div>Lorem ipsum dolor.</div>
</div>
<div id="block3">
    <div>Lorem ipsum dolor.</div>
</div>

Run Code Online (Sandbox Code Playgroud)

我试图#widget在上面显示#block2; 使用以下CSS,您将看到在不更改#widget节点树中的位置的情况下存在问题.

#block1, #block2, #block3 {
    position: relative;
    min-height: 50px;
    width: 100%;
}
#block1, #block3 {
    background-color: #abc;
    color: #123;
    z-index: 1;
}
#block2 {
    background-color: #def;
    color: #456;
    z-index: 2;
}
#widget {
    background-color: #f00;
    position: absolute;
    z-index: 999;
    left: 200px;
    top: 40px;
}

Run Code Online (Sandbox Code Playgroud)

正如你在小提琴中看到的, …

html css position z-index

Dan*_*ugg

2013 08-19

5
推荐指数

1
解决办法

754
查看次数

CSS,z-index DIV'应该在悬停时叠加其他DIV

我有一个问题,现在它吓坏了我好几天了.

我需要一个带有几个较小的DIV-Containers的竞争者Div,它们都应该浮动:左边...如果我悬停一个较小的DIV,高度和宽度应该增加,它应该覆盖其他DIV而不移动它们.

我的代码看起来像这样:

 <div id="boxcontainer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div>

Run Code Online (Sandbox Code Playgroud)

CSS:

.box{
float:left;
postion: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}

#boxcontainer{
postion: relative;
width:500px;
height:auto;
}

.box:hover{
z-index:100;
width:300px;
height:auto;
}

Run Code Online (Sandbox Code Playgroud)

任何帮助都非常感谢!

欢呼,杰伊

css position z-index hover

can*_*all

lucky-day

5
推荐指数

1
解决办法

2万
查看次数

剪切动画div

我正在尝试使用CSS中的动画创建一个漂亮的旧CRT"电视"效果,但是在显示上方和下方预期div的扫描线有一些问题.

我所拥有的是一个登陆页面,其中有4个div链接到该站点的其他区域.前2个div是"TV",每个都有一个背景,显示链接内容的"tv"(静态图像).

在桌面或其他更大的屏幕上,4个div显示为2x2,在较小的屏幕上显示为1x4格式.

我创建了一个单独的图像,用css动画来伪造移动的扫描线向下移动到前2个div.

发生的事情是"扫描线"出现在"电视"上方并移动到"电视"下方.

你可以看到JSFiddle上发生了什么:http: //jsfiddle.net/blyzz/ynekxcud/2/

这是一些清理过的HTML代码:

<a href="URL1" target="_blank">
    <div class="content" id="outside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanout">
            </div>
            <div class="aniscan" id="aniscanout2">
            </div>
        </div>
    </div>
</a>
<a href="URL2" target="_blank">
    <div class="content" id="inside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanin">
            </div>
            <div class="aniscan" id="aniscanin2">
            </div>
        </div>
    </div>
</a>

Run Code Online (Sandbox Code Playgroud)

以及随附的清洁CSS:

.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
}

.scanlines{
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    z-index: 100;
}

.aniscan{
    width: …

Run Code Online (Sandbox Code Playgroud)

html css animation z-index

Jim*_*Jim

lucky-day

5
推荐指数

1
解决办法

298
查看次数