浏览 3416 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (8) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-10
为了验证这几种的作用我写了以下代码：
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body>
<div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">
<div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div>
<div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div>
<div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div>
</div>
<div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div>
</body>
</html>
效果图如下： 
紫色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了 黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。 同时我也明白了另外一个道理，因为默认的类型都是static，所以当我们的页面长度等定位的不合理时一个会把一个挤走。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
