Question

其中包含div个标记的三个p代码，一个堆叠在另一个上面。我需要他们通过修改z-index属性来提出问题。你能告诉我为什么这不起作用吗？

<?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）为position: static（默认值）。

如果position属性的static属性除onmouseover以外的任何有效值，则定位。

看起来您应该将saveRow事件处理程序移动到div元素。

Answer 2

一旦鼠标离开，看起来你没有将z-index缩减回默认值 - 添加一个将z-index重置为0或1或其他东西的函数onmouseout。

使用z-index堆叠XHTML元素

2 个答案: