为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？ [英] Why is my element with position:absolute always showing up underneath position:relative items?
本文介绍了为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！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>
这篇关于为什么我的元素的位置：绝对总是显示在下面的位置：相对项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
