标签: z-index

在CSS中分层图像 - 可以将2个图像放在同一个元素中？

假设我在CSS中为网页设置背景图像,如下所示:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

Run Code Online (Sandbox Code Playgroud)

有没有办法在body元素本身的桌面上层叠第二个图像,或者是创建单独的类并使用z轴的唯一方法？

对不起,这是一个简单的问题,但我一直试图解决这个问题,虽然我无法使其发挥作用,但我还没有在网上找到一个明确的想法,所以,是的有办法,还是这只是一个无法做到的？

谢谢!

css layout image z-index

作者

2018 06-21

15
推荐指数

3
解决办法

4万
查看次数

是否可以使用z-index在其父元素后面添加子元素

我想知道是否可以在z-index的父元素后面有一个子元素.

我想在他的内容之上使用父div作为透明颜色层.

html css position z-index

Roc*_*och

2018 10-17

15
推荐指数

3
解决办法

2万
查看次数

无法让z-index适用于另一个div内的div

我正试图让下拉菜单起作用.它包含一个带有DIV的LI,它在LI悬停时出现.我希望在孩子面前绘制父级,以便我可以创建具有重叠边框的选项卡式效果.我无法让孩子被吸引到父母身后.

以下代码具有相同的问题:

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

和CSS

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

Run Code Online (Sandbox Code Playgroud)

上面的代码将在test_1的FRONT中绘制test_2.我想在test_1之后绘制test_2.我怎么能这样做呢？谢谢你的帮助.

css z-index drop-down-menu

Cyr*_*cle

2017 03-18

15
推荐指数

1
解决办法

3万
查看次数

Google Maps InfoWindow Z-Index

是否有可能为一个信息窗口弹出了其具有较高的Z-指数比谷歌地图的元素？

所以我要说谷歌地图的z指数为零.元素的z-index为100.单击标记会在与元素相同的区域中显示InfoWindow.我们如何让这个InfoWindow悬停在元素上而不是它下面呢？

我已经尝试将InfoWindow的z-Index设置为更高的值,但这似乎没有做任何事情.

我在下面放了一个演示来演示这个问题.任何援助将不胜感激!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Run Code Online (Sandbox Code Playgroud)

<head>
    <title>Infowindow Z-Index Test</title>

    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>                   
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>          

    <script language="Javascript" type="text/javascript">
        var coords = [[35.50733, 35.12768, 3]]; //, [-23.806549, 133.96059, 13], [68.169002, -134.425964, 10], [69.529715, -132.109222, 10], [80.231047, -22.730713, 7], [35.108675, -117.961578, 12]];
        var map;            

        function mapChoose(coords) {
            var current = coords[Math.floor(Math.random() * (coords.length))];
            //mapShow(current[0], current[1], current[2], document.getElementById('map'));
            mapShow(current[0], current[1], current[2], document.getElementById('map_canvas'));
        };

        function initialize() {

            mapChoose(coords);
        }

        function mapShow(lat, lng, zoom, div) …

Run Code Online (Sandbox Code Playgroud)

javascript maps z-index infowindow

The*_*der

lucky-day

15
推荐指数

1
解决办法

8553
查看次数

流量数据显示在Android Google Maps API v2中的绘制形状(折线)上方

我正在使用折线绘制路线,并且在路线上方显示交通数据,因此路线被交通线部分隐藏.

更新我在gmap-api-issues上创建了问题并在那里附加了示例源代码(您只需要将Google Maps API密钥添加到AndroidManifest.xml).请"明星"这些问题以吸引谷歌开发者的注意力.

android google-maps z-index google-maps-android-api-2

mix*_*xel

2014 10-14

15
推荐指数

1
解决办法

1620
查看次数

为什么溢出与z-index交互？

我试图理解z-index背后的规则以及它如何与overflow属性交互.

我有这个HTML:

<body>
  <div class="cell">
    Here is some text to keep things interesting
    <div class="boxy"></div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

这个css:

.boxy {
  position: absolute;
  z-index: 9999;
  top:70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  position: relative;

  /* comment these two lines out and the box appears */
  /* or change them both to 'visible' */
  /* changing only one of them to 'visible' does not work */
  overflow-y: auto;
  overflow-x: auto;
}

Run Code Online (Sandbox Code Playgroud)

我原本预计青色盒子会出现,即使它超出了它的大小,div.cell因为它的z-index和它的位置已经设定.

但是,出现青色框的唯一方法是注释掉overflow-x和-y线. …

css z-index overflow

And*_*erg

2016 06-20

15
推荐指数

1
解决办法

2万
查看次数

Z-index无法正常工作使用picture和background-div

我有一个图像,我想在我的页面上产生一个效果,其中在图片的左侧和底部显示5px灰色背景div.但出于某种原因,我不能让background-div在图片后面对齐.它始终位于顶部.我怎样才能解决这个问题？

Jsfiddle:http://jsfiddle.net/3Z7m4/2/

html css z-index

Opt*_*ime

lucky-day

14
推荐指数

1
解决办法

2万
查看次数

文本插入光标(插入符号)显示在移动浏览器中的其他元素上方

当将焦点放在input移动浏览器中的文本上(在iOS Safari和Chrome上测试)时,文本插入符号会显示在顶部的任何div顶部.

这是一个简单快速的例子:http://jsfiddle.net/XQf8N/

以下是效果的屏幕截图:

在此输入图像描述

解决这个问题的最佳方法是什么？

我在这里尝试了答案:JQuery Mobile:专注的输入文本不尊重z-index,出现在其他所有内容之上,但它不起作用.

更新在进行了一些挖掘之后,我还尝试$("input").blur();在切换菜单时进行操作,div但这似乎也无法在移动设备上运行,但它确实在桌面上移除焦点.

更新2可能与此相关:iPad Safari不会触发模糊事件,但如果我在setTimeout中模糊文本框而不是事件侦听器,则文本框会成功模糊.看到这个小提琴:http://jsfiddle.net/XQf8N/17/

更新3尝试将输入传递给隐藏的文本框似乎无法正常工作http://jsfiddle.net/XQf8N/23/

更新4实现我没有考虑隐藏光标的建议 - http://jsfiddle.net/XQf8N/24/ - 这只是在鼠标指针悬停在文本框上时,对插入符不做任何操作

更新5建议禁用文本框,这不会失去焦点,也不会关闭键盘http://jsfiddle.net/XQf8N/27/

更新6此解决方案:https://stackoverflow.com/a/7761438/1061602在事件监听器中不起作用,请参阅小提琴:http://jsfiddle.net/XQf8N/29/

更新7此解决方案:https://stackoverflow.com/a/6473076/1061602也不起作用,与禁用文本框的结果相同

更新8在使用挖空工具绑定的函数中模糊文本框:http://jsfiddle.net/XQf8N/33/

任何想法原始事件监听器有什么问题？希望如果遇到相同的问题,此故障排除将对某人有所帮助.

html css mobile input z-index

Ada*_*all

2017 05-23

14
推荐指数

1
解决办法

4030
查看次数

CSS否定z-index:这是什么意思？

如果我在元素的z-index属性中添加负整数值,那么根据标准的预期效果是什么？

我搜索的答案,但只找到了这个:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
的"负值降低优先"不为我意味着什么.

css z-index

Her*_*usz

lucky-day

14
推荐指数

2
解决办法

1万
查看次数

CSS溢出时将HTML元素置于z-index的前面

我想将蓝色矩形容器z-index悬停在overflow该容器的元素上时，要比其他盒子更大。

第3局的z-index较大，但是我想访问Loser select下面的蓝色圆圈中的，但是我不能，除非我将鼠标悬停在蓝色矩形上方以获得焦点。

有没有一种方法可以仅使用CSS进行处理，还是需要JQuery？

我创建了一个Fiddle，它可以复制此内容，因此可以忽略任何JS错误，因为实际页面需要包含很多内容，但是问题是完整的。将鼠标悬停在第四项游戏上，该游戏具有三个下拉菜单：源，池，种子。您可以选择种子就好了。但是，将鼠标悬停在顶部的另一个游戏上，然后回到“种子”，除非再次将鼠标悬停在“游泳池”上，否则您无法选择它。无论溢出是什么，我都需要始终选择“种子”。

https://jsfiddle.net/cblaze22/qp4L15tj/8/

游戏悬停的当前代码（蓝色矩形区域）

.forward在蓝色矩形区域上放置了一个大的zindex。

$(element).hover(
                function () {
                    if (!$(this).parent().hasClass('editing')) {
                        $(this).addClass('forward');
                    }
                },
                function() {
                    $(this).removeClass('forward');
                }
            );

Run Code Online (Sandbox Code Playgroud)

html css z-index

Mik*_*ynn

2019 04-15

14
推荐指数

2
解决办法

708
查看次数