1

以下のZ-INDEXオーダーが機能しないのはなぜですか？

私が欲しいのは、H1タグとPタグをオーバーレイするDIVタグです。代わりに、DIVのinnerHTMLが初期化されると、他のタグがページを下にシフトします。ご覧のとおり、ページ上のすべての要素が配置され、DIVのZ-INDEXが高くなっています。他に何が欠けていますか？（HTMLとCSSの両方が検証します）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>z-index test</title>
    <style type="text/css">
        @media screen {
            #myTitle {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
            #overLay {position: relative; margin-top:20px; margin-left:20px; z-index:999;}
            .btn {position: relative; margin-left:20px;}
            p {position: relative; margin-left:20px; z-index:1;}
        }
    </style>
</head>
<body>
<div id="overLay"></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>
4

3 に答える 3

2

要素を他の要素の上に重ねる場合は、z-index を使用するposition: absolute;か、負のマージン/パディングを使用する必要があります。

position:relative;また、css にすべてを配置する必要もありません。

于 2012-07-25T21:03:28.757 に答える
1

相対コンテナー (div) 内での絶対配置を試してください。これにより、通常のドキュメント フローの外に要素が取り込まれ、z-index が機能するはずです。

また、相対要素から z-idnex を削除します。

于 2012-07-25T21:06:13.480 に答える
0

以下は期待どおりに動作します。@Catfish コメントの 1 つに基づいて変更を加えました。

overLay DIV の周りに 1 つのラッパー DIV を追加したことに注意してください。ラッパーには、ページ上の他の要素を含める必要はなく、相対的に配置できます。その z-index は 1 に設定されています。これには絶対配置された overLay DIV が含まれていますが、(私が思うに) 便利なのは #overLay に位置属性を設定する必要がないことです。したがって、感情的には、まだ相対的に位置付けられています。最後に、配置と z-index のスタイル設定が他のすべての要素から削除されました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>z-index test</title>
 <style type="text/css">
  @media screen {
    #wrapper {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
    #overLay {position: absolute; z-index:999; background-color:#fff;}
    #myTitle {margin-top:20px; margin-left:20px;}
    .btn {margin-left:20px;}
    p {margin-left:20px;}
  }
 </style>
</head>
<body>
  <div id="wrapper"><div id="overLay"></div></div>
  <h1 id="myTitle">An H1 Header</h1>
  <p>A paragraph....</p>
  <p>And another paragraph....</p>
  <button class="btn" onclick="on_Clear();">clear div element</button>
  <button class="btn" onclick="on_Init();">init div element</button>

<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>

では、これが実際のページで機能するかどうかを見てみましょう。

于 2012-07-25T22:19:51.467 に答える