前面说到，被设置了float的元素无法使用left、top、right、bottom等位置属性。
那么什么情况下可以用位置属性呢？

答案是:position

position

position:static; (默认值)

没有定位，元素出现在正常的流中，top, bottom, left, right, z-index 属性不生效。

这是position属性中，唯一不能定位的样式。

position:relative;

生成相对定位的元素，相对于其正常位置进行定位。

因为相对于元素原本位置（static）进行定位，所以无法使用z-index属性，只能在同平面上进行定位。如：top, bottom, left, right

position:absolute;

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
元素的层叠通过"z-index"属性进行规定。

z-index 属性控制元素层级，数值越大，越往上突出，数值越小，越往下沉。

很多人不知道怎么灵活控制absolute属性，有时候加了absolute之后，布局就乱掉了。
实际上，absolute需要跟父布局配合使用。
将absolute布局的父级布局设置为position:relative;之后，absolute布局基本会被控制在父布局之内，不用担心跑偏。

position:fixed;

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 属性是相对于浏览器窗口定位，所以不依赖父布局在什么位置。

在用absolute属性，担心受到父布局限制的时候，就可以用fixed属性。

position: inherit;

从父元素继承 position 属性的值。

如果需要跟父布局保持同样的position定位，就可以用inherit属性。

小结：

position样式功能支持定位属性
static无定位无
relative相对定位left、top、right、bottom
absolute相对父布局（static除外）绝对定位left、top、right、bottom、z-index
fixed相对浏览器绝对定位left、top、right、bottom、z-index
inherit继承父布局position样式试父布局情况而定

练习：试一试

<html>
<head>
<style type="text/css">

p.one
{
position:fixed;
top:30px;
right:5px;
}
div{
position:relative;
width:300px;
height:100px;
background-color:#ff0;
margin-top:100px;
margin-left:300px;
}
body{
border:5px solid red;
}
</style>
</head>
<body>

<p>这是body内容，红框以内是浏览器范围</p>
<div>
这是父布局，“更多的文本”是fixed样式，没有在这里面
<p class="one">这是fixed布局，相对浏览器定位。</p>
</div>

</body>
</html>

示例结果：