CSS3 で z-index が効かない問題の解決方法

最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多数発生しました。

1. z-indexを使用する場合、要素には配置がありません（静的配置を除く）

2. 配置の場合、要素の子要素が後から来て要素を覆ってしまうため、要素の z-index は有効になりません。解決方法は、要素を覆っている子要素の z-index を負の数に設定することです。

ドロップダウンボックスの例:

1. カバーする場合:

2. ドロップダウンボックスのZインデックスを負の数に設定する

コード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>無題のドキュメント</title>
<スタイル タイプ="text/css">
* {
    パディング: 0;
    マージン: 0;
    リストスタイル: なし;
}
。全て {
    幅: 330ピクセル;
    高さ: 120px;
    オーバーフロー: 非表示;
    背景: url(img/bg.jpg) 繰り返しなし;
    マージン: 100px 自動;
    行の高さ: 30px;
    テキスト配置: 中央;
    左パディング: 10px;
    下マージン: 0;
}
.all ul {
    位置: 相対的;
    高さ: 30px;
    幅: 100%;
}
.all ul li {
    幅: 100ピクセル;
    高さ: 30px;
    背景: url(img/libg.jpg);
    フロート: 左;
    右マージン: 10px;
    位置: 相対的;
    カーソル: ポインタ;

}
.all ul ul {
    位置: 絶対;
    左: 0;
    上:-90px;
    /*display: none; 一瞬の問題です*/
    遷移: すべて 1;
    不透明度: 0;
    /* 前のボックスの z-index が大きい場合でも、後のボックスは前のボックスを覆います。
    ただし、後続のボックスのZインデックスを負の数に設定することもできます*/
    zインデックス:-1;

}

.all ul .lvTow {
    上:-90px;
    不透明度: 0;
}

.all ul .show{
    上:30px;
    不透明度: 1;
}

</スタイル>
</head>

<本文>
<div class="all" id="リスト">
    <ul>
        <li>第一レベルメニュー<ul>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
            </ul>
        </li>
        <li>第一レベルメニュー<ul>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
            </ul>
        </li>
        <li>第一レベルメニュー<ul>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
                <li>セカンダリメニュー</li>
            </ul>
        </li>
    </ul>
</div>
</本文>
</html>
<スクリプト>
    // オブジェクトを取得する オブジェクトをトラバースする 操作 モジュールを表示する モジュールを非表示にする function List(id) { // オブジェクトを取得する this.id = document.getElementById(id);
        // id値を取得します this.lis = this.id.children[0].children; // 第1レベルメニュー内のすべてのliを取得します
    }
    // init 初期化 List.prototype.init = function() { // すべての li を走査して表示と非表示を切り替える var that = this;
        for(var i=0;i<this.lis.length;i++)
        {
            this.lis[i].index = i;
            this.lis[i].onmouseover = 関数() {
                that.show(this.children[0]); //表示する }
            this.lis[i].onmouseout = 関数() {
                that.hide(this.children[0]); // 非表示にする }
        }
    }
    // 表示モジュール List.prototype.show = function(obj) {
// obj.style.display = "ブロック";
        obj.className = "表示";

    }
    //モジュールを非表示 List.prototype.hide = function(obj) {
// obj.style.display = "なし";
        obj.className = "lvTow";
    }
    var list = new List("list"); // listというオブジェクトをインスタンス化します
    リストを初期化します。
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML ベースタグ target=_parent の使用の紹介

>>: MySQLのネクストキーロックのロック範囲についての簡単な説明