Css中的Position属性
Css属性在线查询地址：
http://www.css88.com/book/css/properties/index.htm
CSS 中的 position 属性
在英语中 position 是指位置，方位;
在Html语言中position 是指（定位元素）
------------------
position有四个取值属性：position : static | absolute | fixed | relative
----------------------
----------------------------------
static
默认值。无特殊定位，对象遵循HTML定位规则（忽略 top, bottom, left, right 或者 z-index 声明）。
absolute
将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。而其层叠通过z-index属性定义
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
fixed
当position属性设为fixed后，元素就按照浏览器的窗口进行定位。
relative
对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。
----------------------
4. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
----------------------
===================================================
这是Position属性中的absolute
<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
#position {
position: absolute;
top: 50px;
left: 120px;
width: 180px;
height: 40px;
margin: -20px 0 0 -75px;
padding: 0 10px;
background: blue;
line-height: 2;
}
</style>
</head>
<body>
<div id="position">我是absolute对象</div>
</body>
</html>
--------------------
<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
h2
{
position:absolute;
left:100px;
top:50px;
background: yellow;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部50 px的元素。.</p>
</body>
</html>
----------------------------------------
<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
.z1,
.z2,
.z3 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
.z1 {
z-index: 1;
background: #000;
}
.z2 {
z-index: 2;
top: 30px;
left: 30px;
background: #C00;
}
.z3 {
z-index: 3;
top: 60px;
left: 60px;
background: #999;
}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
<html>
<head>
<title>CSS绝对定位</title>
<style type="text/css">
#top_Div{
position:absolute; /*绝对定位*/
left:20px; /*距离左侧页面50px*/
top:10px; /*距离顶部页面10px*/
}
#bottom_Div{
position:absolute; /*绝对定位*/
left:130px; /*距离左侧页面130px*/
top:10px; /*距离顶部页面10px*/
}
</style>
</head>
<body>
<div id="top_Div">
我是绝对定位1
</div>
<div id="bottom_Div">
我是绝对定位2
</div>
</body>
</html>
===================================================
这是Position属性中的 static
===================================================
这是Position属性中的 fixed
===================================================
这是Position属性中的 relative
<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
background: red;
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left" style="background: green;">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
-------------
===========================================================
-------------------------------------