相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#Box_relative { position: relative; left: 30px; top: 20px;}如下图所示：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
那么我们就会想了怎么让框三把框二覆盖呢，很自然的想到把框3的z-index设为一个优先级高的值如100，但是这样并不能得到我们想要的结果，必须把框2的z-index设为优先级低的如-1，
我猜想是因为框2已经脱离了文档流，所以只设置框3的z-index对框2起不到作用，所以只能对框2 *** 作了。大家也可以去试试代码如下在ie7下通过：
<HTML>
<head runat="server">
<Title>UnTitled Page</Title>
<style type="text/CSS">
span
{
background-color: Red;
wIDth: 30px;
height: 30px;
}
#Box_relative
{
position: relative;
left: 10px;
top: 10px; background-color: gray;z-index:-1;
}
</style>
</head>
<body>
<span></span><span ID="Box_relative"></span><span style="z-index:30"></span>
</body>
</HTML> 总结
以上是内存溢出为你收集整理的CSS教程：相对、绝对定位及布局和浮动全部内容，希望文章能够帮你解决CSS教程：相对、绝对定位及布局和浮动所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）