使用z-index堆疊XHTML元素

Question

三個div標簽（內含p標簽），一個堆疊在另一個頂部。 我需要他們通過修改z-index屬性提出onmouseover。 您能告訴我為什么這不起作用嗎？

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->

<head>
    <title>Lab 8A : Changing element stacking on mouseover</title>

    <script type="text/javascript">
        function MoveUp(here)
        {
            here.style.zIndex= 5;
        }
    </script>

    <style type="text/css">
        div {position:absolute}
        p {font-size:100px; margin:0px; border:solid}
    </style>
</head>

<body>
    <div>
        <p style="background-color:green" onmouseover="this.style.zIndex=5">IWT Lab 1</p>
    </div>
    <div>
        <p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
    </div>
    <div>
        <p  style="background-color:pink;  margin-left:100px" onmouseover="MoveUp(this)">IWT Lab 3</p>
    </div>
</body>
</html>

新代碼：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Lab Program 8A // Element stacking -->
<head>
<title>Lab 8A : Changing element stacking on mouseover</title>
<script type="text/javascript">
function MoveUp(here)
{
here.style.zIndex= 1 ;
}
function MoveDown(here)
{
here.style.zIndex = 0 ;
}
</script>
<style type="text/css">
div {position:absolute}
p {position:absolute; font-size:100px; margin:0px; border:solid; height:150px; width:500px}
</style>
</head>
<body>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:green">IWT Lab 1</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p style="background-color:yellow; margin-left:50px" onmouseover="MoveUp(this)">IWT Lab 2</p>
</div>
<div onmouseover="MoveUp(this)" onmouseout="MoveDown(this)">
<p  style="background-color:pink;  margin-left:100px">IWT Lab 3</p>
</div>
</body>
</html>

Answer 1

z-index僅適用於定位的元素。 當div元素作為position: absolute ，您的p元素（將z-index設置為on）為position: static （默認值）。

如果元素的position屬性具有除static之外的任何有效值，則對元素進行定位。

看來您應該將onmouseover事件處理程序移至div元素。

Answer 2

看起來，一旦鼠標離開，您就不會將z-index還原為默認值-添加一個onmouseout函數，將z-index重置為0或1或類似的值。

使用z-index堆疊XHTML元素

問題描述

2 個解決方案

解決方案1
0 2015-11-30 16:58:59

解決方案2
0 2015-11-30 17:01:23

使用z-index堆疊XHTML元素

問題描述

2 個解決方案

解決方案1 0 2015-11-30 16:58:59

解決方案2 0 2015-11-30 17:01:23

解決方案1
0 2015-11-30 16:58:59

解決方案2
0 2015-11-30 17:01:23