您的位置：首页 > Web前端 > CSS

CSS教程：相对、绝对定位及布局和浮动

2014-03-23 21:27 666 查看


CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航