Css+Div布局学习（三）—定位Position

liyiye

浏览: 427059 次
性别:
来自: 广州

最近访客更多访客>>

fangwei

yourtion

影子yingzi

janphy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js_and_css

CSS 浏览器 Firefox HTML XHTML

所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。

在详细介绍之前，我们先简要的说明一下定位的4种方法：

1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。

2、绝对定位（absolute）：这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时，元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。

3、固定定位（fixed）：这种方法允许元素相对于实际的浏览器窗口放置。

4、相对定位（relative）：这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释，可喜的是这个方法使用的很少。

静止定位static

定位的默认值static，不使用定位属性和使用这个值对页面没有什么效果的。

绝对定位absolute

当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上。看看下面的例子：

#sidebar{ 
position:absolute; 
top:100px; 
right:200px; 
width:280px; 
}

上面说了被绝对定位的元素从流中间移走了，所以在流中间的任何元素将不会受到影响，看见过网站上的小广告吧，后面的文字不会受其任何的影响，就是这样的效果！还有这里介绍的定位是指元素，对！是元素，也就是说你可以使用在任何的元素上（包括内联元素哦），当然更多的是使用在div上。

那如果我放置两个绝对定位的元素，谁会被遮挡住呢？这里需要介绍一个叫做z-index的属性，将这个属性设置的值越大，那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;

在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢？这件事情是要说清楚的，不要说我们没有告诉你啊，它使用的绝对定位是相对于它的父级位置的，而不是整个页面的。

注意：个人认为不要使用绝对定位的方式去布局你的网站，因为网站的内容往往会根据你数据库内容的多少来显示，也就是说你不能完全确定网站的高度（还有一个原因不是确定高度是因为宽屏的电脑越来越多了）。而绝对定位以后你将不能应对这样的变化，比如你不能确定你的页脚放置在什么位置上合适。

固定定位fixed

固定定位指定元素的位置和你使用绝对定位基本相同，不过作用不同。它的位置是相对于浏览器窗口的，下面的那个div就是的，你滚动一下鼠标的滚轮看看就清楚了。

#sidebar{ 
position:fixed; 
top:300px; 
left:-90px; 
width:280px; 
}

注意：position:fixed;这个属性在IE6里面居然不兼容！现在使用IE6的可不少啊，那总不能就这样放任不管了吧，我提供了一个简单事例，大家可以看看通过Css hack是如何解决这个问题的。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>position:fixed in IE6 修正</title> 
<style type="text/css"> 
<!-- 
body{padding:0 10px;height:100%; 
font-size:12px;overflow-y:auto;} 
#leftMenu { background: #CCCCCC; height: 300px; width: 150px; 
  position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px; 
  letter-spacing: 0.2em; color:#990033;} 
#main{ background:#36F; margin-top:450px; margin-bottom:300px; 
  float:right; padding:10px; color:#FFF;} 
* html{overflow-x:auto;overflow-y:hidden;} 
* html #leftMenu{position:absolute;} 
--> 
</style> 
</head> 
<body> 
<div id="leftMenu"> 
  <p>这是左侧的菜单，在标准的浏览器中采用固定定位，而非标准的浏览器（IE6）中，使用了一些HACK，和IE6本身的BUG！</p> 
  <p>enjoy it!（这句英语帅不？）</p> 
</div> 

<div id="main"> 
  <p>这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p> 
  <p>拖动页面右边滚动条，你可以看到，灰色的左菜单始终固定，这种现象不止于IE7、FireFox，在IE6下也有较为完美的表现~这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p> 
</div> 
</body> 
</html>

相对定位relative

这个方法使用的很少，可能大家都没有用过，或者别人使用了也看不出来。先来看看它的工作原理，相对定位的元素仍然是页面流的一部分，不同于绝对定位和固定定位。但是它在显现自身的最后一刻叛变了，它离开了自己的岗位，偏移到Css指定的位置上，原来的岗位呢？还给他留着呢！

谁逼迫它叛变的？我们使用的position:relative;和浏览器就是元凶！大家可以试试看，你指定的家伙是怎么叛变的，我就不做这个恶人了。

分享到：

Css+Div布局学习（四）—关于hack | Css+Div布局学习（二）—清理Clear

2008-09-22 11:25
浏览 3256
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论