定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
<html><head>
<style type='text/css'>
#mainNav li{
display:inline
position:relative
}
#mainNav li ul{
display:none
}
#mainNav li.iehover ul{
display:block
left:-40
top:18
position:absolute
}
#mainNav li.iehover ul li{
display:list-item
left:0
}
#mainNav li a:hover{
background:red
}
.content{
top:20
text-align:center
width:800
height:600
position:relative
}
#MenuPos{
top:20
left:20%
width:400
position:relative
}
</style>
</head>
<body>
<div id='MenuPos'>
<ul id="mainNav" >
<li><a href="\">主页</a></li>
<li onmouseover='alert(this.className)' ><a href="#" >华人男星</a>
<ul >
<li><a href="#">周杰伦(Jay Chou)</a></li>
<li><a href="#">王力宏(Wang, Li Hong)</a></li>
<li><a href="#">张学友(Cheung, Hok Yau Jacky)</a></li>
</ul>
</li>
<li><a href="#">华人女星</a>
<ul>
<li><a href="#">蔡依林(Tsai, Yi Lin Jolin)</a></li>
<li><a href="#">张韶涵(Zhang Shao Han)</a></li>
<li><a href="#">梁静茹(Liang, Ching Ju)</a></li>
</ul>
</li>
<li><a href="#">华人组合</a>
<ul>
<li><a href="#">S.H.E</a></li>
<li><a href="#">False</a></li>
<li><a href="#">AlarmBeyond</a></li>
</ul>
</li>
<li><a href="#">日韩男星</a>
<ul>
<li><a href="#">安七炫</a></li>
<li><a href="#">Rain</a></li>
<li><a href="#">张佑赫</a></li>
</ul>
</li>
</ul>
</div>
<div class='content'>内容</div>
<DIV style="HEIGHT: 23pxpadding-bottom:15pxposition:relativebottom:0px" align="center"
id="x_1">Copyright © 2009<DIV>
</body>
</html>
