标签: z-index
背景元素上的 z-index 图像
回到基础，我有一种情况，我有一个图像需要出现在它正下方元素的背景上。但是，我不希望图像超过该元素的内容，只希望元素（和背景属性）本身：
http://jsfiddle.net/chricholson/4twr5/1/
HTML：
<img src="https://www.google.com/images/srpr/logo3w.png" />
<div>
<a href="#">Hello World</a>
</div>
?
CSS：
img { position: absolute; z-index: 20; }
div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }
a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }
预期的行为是图像出现在 div 背景[check]的顶部，但随后出现在黄色链接的后面，而事实并非如此。
推荐指数
解决办法
查看次数
占位符 z-index Firefox 问题
使用 Firefox 时，我在注册输入中有占位符，注册表单上方是我的菜单，当我将鼠标悬停在下拉菜单上时，占位符出现在顶部。
我试过搞乱 z 索引，但这似乎不是问题。输入字段的所有其他部分都隐藏在下拉菜单后面，而不是占位符。
我也试过将 z-indexes 添加到
::-webkit-input-placeholder {}
::-moz-placeholder {}
:-ms-input-placeholder {}
input:-moz-placeholder {}
但无济于事。
我更希望在不求助于 Javascript 的情况下实现这一目标。
jsfiddle 快速演示：http : //jsfiddle.net/LLANn/1/
推荐指数
解决办法
查看次数
z-index 无法在叠加层上方获取元素
我有一个水平列表框，它被一个弹出式覆盖重叠。水平框的结构使用ui li
现在的问题是，如何使用z-index. 在我的示例中，我需要获取在覆盖 div 上方li具有类名.test的 。
.wrapper { position: relative }
ul li {
margin:0;
padding:0
}
li {
background:yellow;
display:inline-block;
width:60px;
height: 60px;
}
.overlay {
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10
}
.test {
z-index:100 /*not working */
}
推荐指数
解决办法
查看次数
Box-shadow 因相邻的浮动框而被截断
浮动 div 的 box-shadow 被它的右侧邻居切断，但不在左侧。
我玩过 z-index 和 overflow: visible 但它不起作用。
HTML：
<div class="doc-page"></div>
<div class="doc-page active"></div>
<div class="doc-page"></div>
CSS：
.doc-page {
float: left;
width: 141px;
height: 200px;
border: 1px solid black;
background-color: white;
}
.active {
box-shadow: 0 0 5px 5px #888;
}
结果：
小提琴：http : //jsfiddle.net/au5Lv/1/
推荐指数
解决办法
查看次数
如何在FlxGroup中更改FlxSprite的z-index？
我有一个异构的FlxGroup包含:10 FlxSprite和4 FlxText.我用add(obj)函数添加所有对象,并通过add函数确定它们的z-index.
我想在程序运行时动态更改我的FlxGroup中对象的z-index值(例如:单击鼠标).
我尝试过这样的事情:
- this.setChildIndex(object,i)但是没有这样的函数
- this.add(object)尝试添加已添加的对象
推荐指数
解决办法
查看次数
JavaScript 在点击时设置 z-index
我制作了一个网站，其中包含一个随机生成 50 个圆形<div>元素的显示区域。我想让当点击其中一个圆圈时，它会出现在前景中。我认为在创建的每个圆圈上使用 addEventListener 函数会起作用，但我无法让它做任何事情。谢谢你。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index_styling.css">
<script type="text/javascript" src="index_scripts.js"></script>
</head>
<header>
<h1>First Last, Assignment #6</h1>
</header>
<div id="orange_strip"></div>
<body>
<form>
<ul>
<li>
<input type="button" name="add" value="Add Square">
<input type="button" name="change" value="Change All Square Colors">
<input type="button" name="reset" value="Reset All Squares">
</li>
</ul>
<div id="display">
</div>
</form>
</body>
<footer>
<div id="copyright">Copyright © 2016 - First Mid Last</div>
</footer>
</html>
JavaScript
window.onload = function() {
for (var i …推荐指数
解决办法
查看次数
滚动时如何让文本与背景图像保持固定？
我有一个着陆页，上面有我网站的标题、一个子标题和一个按钮。我固定了背景图像，background-attachment以便在向上滚动时保持原位。
我希望我的标题、子标题和按钮保持原位，以便概览部分与其重叠。我尝试将文本设置为固定位置并制作z-index: -1，但它位于背景图像后面并出现在概览部分中。
https://codepen.io/anon/pen/qmdzzz
文本被包裹在intro-textdiv 中
@media (min-width: 768px){
header .intro-text {
padding-top: 300px;
padding-bottom: 200px;
position: fixed;
z-index: -1
}
}
然后我尝试为概述部分设置更高的 z-index
#overview {
z-index: 1000;
}
推荐指数
解决办法
查看次数
当 Google Maps Full Screen 为 true 时，Google Maps AutoComplete 下拉菜单隐藏
我已经在地图上实现了一个带有自动完成功能的谷歌地图，并且我已经将 FullScreenControl 选项设置为“true”（您可以在下图中的右侧看到 FullScreenControl）
我的问题是，当我通过单击 FullScreenControl 切换到全屏模式时，下拉菜单隐藏在谷歌地图后面。ZIndex 似乎太低，但将其设置为非常大的数字似乎并不能解决问题。您可以从下图中看到下拉列表存在，但仅在全屏谷歌地图后面。
我确实找到了一个类似的问题，其中有人使用了普通下拉菜单而不是谷歌地图自动完成。 类似问答
但是，该解决方案对我不起作用。设置 ZIndex 似乎不起作用。我在 Angular2 中使用 TypeScript。
谢谢你。
![自动完成下拉显示[![][2]](https://i.stack.imgur.com/wtvRz.jpg)
] 4
推荐指数
解决办法
查看次数
Angular Material (2.0) AutoComplete Suggestions 面板出现在 Bootstrap Modal 后面
我正在尝试将自动完成字段添加到我拥有的 boostrap 模态，但是在键入时，建议框出现在模态后面并且用户无法看到。
我尝试了以下方法：
.mat-autocomplete-panel {
position: fixed !important;
z-index:100000 !important;
}
但是我没有找到任何成功，有没有人有幸将建议框移到前面？
图片：
推荐指数
解决办法
查看次数
Bootstrap - Why is a div with a lower z-index covering a higher one?
A position:fixed div covers the entire page (except for elements with higher z-indexes, like the <a></a> elements).
Or at least, that is unless you click the navbar brand name, which I set to z-index: 9999; while the entire page div is z-index:9994.
Once the position:fixed div is clicked, it closes the dropdown menu.
The position:fixed div only appears when the dropdown menu is open. It's class name is .blackout and it's container name is .labelBlackout.
You can make …
推荐指数
解决办法
查看次数
标签 统计
z-index ×10
html ×7
css ×6
autocomplete ×2
css-position ×2
angular ×1
dropdown ×1
firefox ×1
fullscreen ×1
google-maps ×1
haxe ×1
haxeflixel ×1
javascript ×1
onclick ×1
placeholder ×1
sprite ×1