position 定位

beyes · 发表于 2015-12-21 23:20:11

在说 position 定位之前，需要先了解 html 是以一种流的方式依次的展现在你的面前的。比如下面的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Position</title>
<style>
.groad { background-color:#97D0F9 }
.groad span {font-size:22px; color:#fff }
.forum { background-color:#A8F3BC; height:80px; }
</style>
</head>
<body>
<div class="groad">[url]www.groad.net[/url] <span>技术论坛</span></div>
<div class="forum">曲径通幽</div>
</body>
</html>

复制代码

它呈现的效果是：

注意代码的书写顺序以效果的展现顺序。

但是在日常的使用中，我们经常遇到一些导航栏中的下拉菜单，只要鼠标移动到其上，下拉菜单就会自动出现，而这个下拉菜单是不会影响页面中的其它元素，这是怎么回事呢？这个就和 postion 定位有关了，看下面逐步演示。

比较下面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Position</title>
<style>
.groad { background-color:#97D0F9 }
.groad span {font-size:22px; color:#fff }
.forum { background-color:#A8F3BC; height:80px; position:relative; left:150px; }
.css{background-color:#F3F8C1; color:blue; height:50px}
</style>
</head>
<body>
<div class="groad">[url]www.groad.net[/url] <span>技术论坛</span></div>
<div class="forum">曲径通幽</div>
<div class="css">曲径通幽 CSS 版块</div>
</body>
</html>

复制代码

显示效果为：

上面代码中，forum 处已经使用了 postion 来定位，其值为 reletive （相对定位），该属性后面还得添加一项，告诉它的相对偏移位置（left:150px，向左偏移 150px ）。那这里的相对偏移了 150px 是相对于哪个参照物来偏移的呢？先不着急说，且看再加另外一个 top 偏移，相应的代码写成：

.forum { background-color:#A8F3BC; height:80px; position:relative; left:150px; top:30px }

复制代码

看效果图：

我们可以将 top 值改得再大一点，比如 top:150px ，那么看到的效果是：

通过上面的比较，我们看到，相对偏移，实际上是元素相对于文档流中它原来的空间位置的偏移！像上面的例子里，经过改 top 后的位置移动，是相对于原来的空间位置，沿着 Y 轴向下移动的（当值为负数时，向上移动）。另外需要注意的是，它原来的空间位仍然保留着一片空白。

除了相对定位，还有绝对定位，下面来看看绝对定位是怎么说的。

要用绝对定位时， position 的值要改为 absolute ，此时效果变为：

当改为绝对定位时，对应这个 div 元素已经完全从文档流中剥离出来，而不再按照原先的代码书写顺序来展示。这个就如同，当你上体育课时，体育委员是可以单独站出来的，而不是和其他同学一块排队的。

然而，不管是相对定位还是绝对定位，参照物必须有，那么绝对定位的参照物是什么呢？在这里的情况是，参照的是 body 体来定位，这个可以通过修改 left, top 等值观察到。但实际应用中一般是不会参照 body 体（整个屏幕）来定位的，这是因为当使用不同的显示器，不同的分辨率时，这样的位置都会发生变化，所以不能这么做。那么这个问题该怎么办？

上面所演示的绝对定位，之所以参照 body 体，那是因为它在它的旁边，或者更远的地方没有找到一个“父” div 作为参照物。下面修改代码，看另一种情况：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Position</title>
<style>
.groad { background-color:#97D0F9 }
.groad span {font-size:22px; color:#fff }
.pa { height:150px; width:600px; background-color:#E6B4F4; position:relative; top:80px }
.forum { background-color:#A8F3BC; height:80px; position:absolute; top:100px }
.css { background-color:#F3F8C1; color:blue; height:50px; top:200px }
</style>
</head>
<body>
<div class="groad">www.groad.net <span>技术论坛</span></div>
<div class="css">曲径通幽 CSS 版块</div>
<div class="pa">
<div class="forum">曲径通幽</div>
</div>
</body>
</html>

复制代码

显示效果：

在上面代码中，forum 这个 div 被包含在 pa 这个 div 中，pa 是 forum 的父元素，且 pa 的 position 被设置为 relative。这样，forum 这个浅绿背景的小方块就有了参照物，尽管它是 absolute 的，但它会跟着 pa 的位置改变而改变（可以通过改变 pa 的 top 值来观察）。

有了这个技巧后，由于不再被强制以 body 体作为偏移的参照物，此时具有 absolute 属性的元素就可以在页面中任意走动了，以后再配合 js 脚本，那么就可以制作出任何的效果。

		自动登录	找回密码
密码			立即注册

[CSS] position 定位

本帖子中包含更多资源

浏览过的版块