如何在JavaScript中使用z-index

Question

什么是zindex的语法？

我尝试过像这样：

document.getElementById('iframe_div1').style.zIndex =2000;
document.getElementById('iframe_div1').style.z-index =2000;

它不起作用，甚至没有显示错误。

这是我的代码片段。在HTML中它能正常工作，但我想在jQuery或JavaScript中设置这个CSS属性。top/position属性不起作用...

z-index:1200px; top:450px; position:absolute; right:300px;

document.getElementById('iframe_div1').style.display='block';
$("#iframe_div1").css("z-index", "500");
$("#iframe_div1").css("right", "300");
$("#iframe_div1").css("top", "450");
document.getElementById('iframe_div1').style.position = "absolute";

这段代码不是我期望的那么完美。我想把我的div居中于页面，但它只会将我的div移动到页面底部。

- Bharanikumar

---

为什么不将CSS行放入元素的cssText中？ - James Black

混合使用jQuery和普通JS（完成同一任务）并不是很好的选择。 - Felix Kling

Answer 1

document.getElementById('iframe_div1').style.zIndex = "2000"; 很好。只需确保其 position 是 absolute 或 relative，如下所示：

document.getElementById('iframe_div1').style.position = "relative"; // could also be absolute

- Reigel Gallarde

Answer 2

前者应该是可以正常工作的。使用像Firebug的“检查元素”这样的DOM检查器，以确定可能已经分配了值，但并没有产生预期的效果。

在jQuery中，可以这样写：

 $("#iframe_div1").css("z-index", "2000");

- Pekka

---

@Bharani 关于位置方面有什么问题吗？ - Pekka

Answer 3

正如此链接所提到的，zIndex 只在元素被定位时有效，所以你是否正在使用类似 position: absolute; 的东西？

http://www.w3schools.com/jsref/prop_style_zindex.asp

- James Black

Answer 4

$('#iframe_div1').css({
        right : '300px',
        top : '450px',
        border : '1px solid red',
        color : '#f00'
});

谢谢，问题已解决。

- Bharanikumar

Answer 5

“...但它只是将我的div移动到页面底部...”

因为：

document.getElementById('iframe_div1').style.display='block';

必须是：

document.getElementById('iframe_div1').style.display='relation';

//or

document.getElementById('iframe_div1').style.display='absolute';

- ajile

---

不是的。absolute 是用于 position，而不是 display。如果你对这个主题不了解，请不要发布错误的答案。 - Derek 朕會功夫