标签: z-index
在Webkit浏览器上使用jQuery读取和设置z-index值
jQuery("#X").css("z-index");始终在Webkit浏览器上返回"auto".在Firefox上运行正常.
您似乎也无法使用以下内容设置z-index: jQuery("#X").css("z-index",5);
测试用例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery CSS Z-index Fail</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#X").css("z-index",5);
$("#Y").append($("#X").css("z-index"));
});
</script>
<style type="text/css">
h1 {z-index: 3;}
</style>
</head>
<body>
<h1 id="X">Some Text</h1>
<div id="Y"> Z-index is: </div>
</body>
</html>
推荐指数
解决办法
查看次数
在iframe上覆盖画布-HTML
我正在忙着编写一个生成HTML代码的servlet。目的是创建一个热图，以供人们根据所存储的点击数据在网站上点击。我发现使用javascript在画布中创建热图，现在我想将该画布覆盖在点击信息所针对的网页上。
到目前为止，这是我的HTML，它成功生成了热图，并创建了iframe。iframe覆盖在热图上。目前，我不知道如何使iframe的大小与网页的大小相同，以致似乎正在查看的网站上覆盖了热图：
<html>
<head>
<style>
#heatmapArea{
position:relative;
float:left;
width:410px;
height:410px;
z-index:1000;
border:1px dashed black;
#iframeArea{
position:relative;
float:left;
width:100%;
height:100%
z-index:1;
}
}
</style>
</head>
<body>
<div id="main">
<div id="heatmapArea">
<div id="iframeArea">
<iframe src="www.google.com"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript">
window.onload = function(){
var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":10, "visible":true});
var el = "{max: 100, data: [{x: 20, y: 20, count: 10},{x: 200, y: 200, count: 43},{x: 200, y: 400, count: 7},{x: 380, y: 400, count: 6},{x: 400, y: 400, …推荐指数
解决办法
查看次数
如何使用某些整数值设置z索引
过去几个月我一直在使用android.对我来说,问题现在与Z指数值有关.我正在使用textview,edittext和imageview进行布局.假设我有一个像这样的xml文件..
<Layout1>
<edittext><zindex>3</zindex></edittext>
<textview><zindex>2</zindex></textview>
<imageview><zindex>1</zindex></imageview>
</Layout1>
所以我的问题是我正在通过DOM解析器读取这个xml文件,我想通过xml中定义的值为所有这些设置z索引值.现在我可以使用任何功能或属性来执行此操作.我已经学会了用xml编写它,但这会使它硬编码.我想要一个动态显示,所以如何使用zindex值调整布局.... HELP PLZ
推荐指数
解决办法
查看次数
使用PNG的Alpha作为附加点击/悬停事件的"热点",可能吗？
打开讨论 我正在寻找优化这个代码,可能是一个对象.但更重要的是,我是功能新手.我想学习传递,检索,返回变量.如果有人对此有任何好的教程链接,或者想讨论,请从这里开始.:)
我们知道,图像是矩形.我在div的单独z-index层中有一些透明的PNG.我遇到了一个问题,我试图点击其中一个图像,但它被顶部的div阻止了更高的z-index.是否可以点击通过PNG和他们的父div来实现这种效果？请参阅附图作为参考,它更能说明我的观点.
谢谢!
简而言之,出于某种原因,我认为我可以使用PNG的alpha作为hitspot.大声笑@那个想法.所以我在一个新的独立容器中创建了重叠的div,这些就是hitspots.
正如您所看到的,这是一个无限的旋转木马.点击时,点击点的z索引以及图像的z索引都会发生变化.至少可以说这是一个有趣的项目.我希望优化它,并学习如何更有效地使用函数(即传递,检索变量,返回变量等).
我希望,当我回到家时,我会发布一些有趣的对话.如果您对如何优化有任何想法,请分享!:)
(function (w, d) {
$(w).load(function () { //window load
preload();
$('#info div a:not([rel=ad])').find('img').hide(); //hides 'learn more' buttons
}); //end window.load
$(d).ready(function () { //document ready
onHover(); //activate hover
onClick(); //activates click function
}); //end document.ready
var isFirst = ["1"], //flag to see if the first click was triggered on a hotspot or not
pxPos = ["1px", "399px", "577px", "782px", "969px", "1162px", "1330px"], //pixel position where we will animate the targets
name = ["bill", …推荐指数
解决办法
查看次数
Chrome不尊重z-index订单
我正在为一家教育公司创建一个学习模块,在那里我创建了25个动物精灵(带有图像的画布)并将它们放入一个农场(带有背景图像的div).然后我根据它们在背景上的位置对它们的z-index重新排序,以便更接近的精灵将位于更远的顶部(背景DIV和精灵都是位置:绝对;).
这是重新排列精灵的功能:
Array.prototype.sortIndices = function (func) {
var i = j = this.length,
that = this;
while (i--) {
this[i] = { k: i, v: this[i] };
}
this.sort(function (a, b) {
return func ? func.call(that, a.v, b.v) :
a.v < b.v ? -1 : a.v > b.v ? 1 : 0;
});
while (j--) {
this[j] = this[j].k;
}
}
function rearrangeSprites() {
var zSprites = new Array();
for (var i = 0; i < sprites.length; i++) …推荐指数
解决办法
查看次数
测试元素是否在前面的简单方法？
页面中的两个元素具有相同的z-index ...
<div id="one" style="position: absolute; z-index: 1; top: 0px; left: 0px;"></div>
<div id="two" style="position: absolute; z-index: 1; top: 0px; left: 0px;"></div>
Div 2出现在前面,因为它跟在源中的div之后.
在jQuery中有一种简单的方法来测试一个元素是否在另一个元素的前面？
推荐指数
解决办法
查看次数
使固定位置元素出现在静态位置元素后面
如何使元素position: fixed在元素后面显示position: static？改变z指数似乎并不重要,因为它们不是绝对的.
推荐指数
解决办法
查看次数
HTML5中的发送回功能
我有以下用于HTML的用例
I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div.
I have the option of "send to back" which sends the selected div to back of other div.
If I apply this to blue div and select blue div it should look like below image
基本上我想要的MINIC功能Arrange --> Order --> Send to back的Google Presentation
我确实尝试z-index过没有成功.我可以使用background-gradient重叠的部分,blue div transparent但这会侵犯我想要避免的一些计算.
如何在HTML中实现这一点？ …
推荐指数
解决办法
查看次数
如何通过z-index覆盖另一个div
在这个例子中提到
只是通过使用,我无法在div的id="covered"顶部获得div .id="cover"z-index
还有其他解决方案吗？
代码来自http://codepen.io/anon/pen/jhgtf:
HTML:
<div id="cover"></div>
<div id="covered"></div>
CSS:
#cover{
position:fixed;
width:800px;
background:black;
height:350px;
z-index:10;
}
#covered{
width:80px;
background:yellow;
height:50px;
z-index:11;
}
推荐指数
解决办法
查看次数
z-index不适用于固定元素
当我偶然发现这个有趣的事实时,我正在处理我的代码:
z-index 不适用于固定元素,因此,固定元素将始终位于前面.
有没有办法将非固定元素放在固定元素的前面？
谢谢.
#fixed {
background-color: red;
width: 500px;
height: 500px;
position: fixed;
z-index: 0;
}
#normal {
background-color: blue;
width: 500px;
height: 500px;
z-index: 1;
}<div id = 'fixed'> I'm Fixed </div>
<div id = 'normal'> I'm Normal </div>推荐指数
解决办法
查看次数