最近寫CSS3和js結合，遇到了很多次z-index不生效的情況：
1.在用z-index的時候，該元素沒有定位(static定位除外)
2.在有定位的情況下，該元素的z-index沒有生效，是因為該元素的子元素後來居上，蓋住了該元素，解決方式：将蓋住該元素的子元素的z-index設定為負數
下拉框例子：
1.蓋住的時候：
2.将下拉框的z-index設定為負數
代碼：
無标題文檔
* {
padding: 0;
margin: 0;
list-style: none;
}
.all {
width: 330px;
height: 120px;
overflow: hidden;
background: url(img/bg.jpg) no-repeat;
margin: 100px auto;
line-height: 30px;
text-align: center;
padding-left: 10px;
margin-bottom: 0;
}
.all ul {
position: relative;
height: 30px;
width: 100%;
}
.all ul li {
width: 100px;
height: 30px;
background: url(img/libg.jpg);
float: left;
margin-right: 10px;
position: relative;
cursor: pointer;
}
.all ul ul {
position: absolute;
left: 0;
top:-90px;
transition: all 1s;
opacity: 0;
z-index:-1;
}
.all ul .lvTow {
top:-90px;
opacity: 0;
}
.all ul .show{
top:30px;
opacity: 1;
}
- 一級菜單
- 二級菜單
- 二級菜單
- 二級菜單
- 一級菜單
- 二級菜單
- 二級菜單
- 二級菜單
- 一級菜單
- 二級菜單
- 二級菜單
- 二級菜單
// 擷取對象 周遊對象操作 顯示子產品 隐藏子產品
function List(id) { // 擷取對象
this.id = document.getElementById(id);
// 取 id 值
this.lis = this.id.children[0].children; // 擷取一級菜單所有的li
}
// init 初始化
List.prototype.init = function() { // 周遊所有的li 顯示和隐藏
var that = this;
for(var i=0;i
{
this.lis[i].index = i;
this.lis[i].onmouseover = function() {
that.show(this.children[0]); // 顯示出來
}
this.lis[i].onmouseout = function() {
that.hide(this.children[0]); // 隐藏起來
}
}
}
// 顯示子產品
List.prototype.show = function(obj) {
// obj.style.display = "block";
obj.className = "show";
}
// 隐藏子產品
List.prototype.hide = function(obj) {
// obj.style.display = "none";
obj.className = "lvTow";
}
var list = new List("list"); // 執行個體化了一個對象 叫 list
list.init();
以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。