绝对定位(position:absdlute;)是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
对于定位的主要问题是要记住每种定位的意义
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
例子:
<meta charset="UTF-8"> <title>绝定定位</title>
<head>
.father{position: relative;} 在父元素中设置宽高,相对定位
.one{position: absolute;} 绝对定位 默认是以Body为参照进行定位。 不是默认则,查找最近的设置了定位属性的父元素来作为参照。
.tu{ position: absolute;}
</head>
<body>
<div class="father"> 要先设置一个父元素。
<div class="one"><div>
<div class="tu"><div>
<div class="san"><div>
</div>
</body>
</html>
相对定位(position:relative;)是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。
浮动定位才是常用的。
固定定位(position:fixed;)如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{ height: 10000px;}
.one{ width: height: background-color position: fixed; }
ul{ width: position: fixed; bottom:; right: background-color: }
ul li{
list-style: none;
float: left;
padding: 5px 15px;
font: 15px/20px";
}
</style>
</head>
<body>
<!-- <div class="one"></div> -->
<ul>
<li>男装</li>
<li>女装</li>
</ul>
</body>
</html>
除了absdlute和relative之外还有一个默认定位(position:static;)标准文档流中的定向。
相对定位
原文:http://www.cnblogs.com/m79y/p/6258747.html