为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？

本文介绍了为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1/> 
< title> TEST< / title> 
< / head> 
< body style =margin：0; padding：0> 
 
< div style =background-color：#eeeeee; margin：auto; height：500px; width：500px> 
< div style =position：relative> 
< span style =position：absolute; display：block; height：250px; width：250px; background：green; z-layer：2>< br />< br />应该位于顶部< / span> 
< / div> 
 < / div> 
 
< / body> 
< / html>

解决方案

索引

绝对跨度也是一个没有z-index的相对div

这里是正确的html：

 < div style =background-color：#eeeeee; margin：auto; height：500px; width：500px > 
< div style =position：relative; z-index：2> 
 < / div> 
< span style =position：relative; display：block; width：500px; background：blue; z-index：1>其实在顶部< / span> 
< / div>

It's all in the question but here's a simple example

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <title>TEST</title>
</head>
<body style="margin:0;padding:0">

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green;z-layer:2"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-layer:1">Actually on top</span>
</div>

</body>
</html>

解决方案

instead of "z-layer" use "z-index"

also the absolute span is in a relative div with no z-index

Here is the correct html:

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative;z-index:2">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>

这篇关于为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！