Position属性

      Position属性有四种类型分别是：

      1.static，即默认属性，Html元素按原始属性排列。

      2.relative，相对定位。使用后，left/right/bottom/top属性不在只为div等服务，p等等元素也可以使用。

      3.absolute，生成一个块级框。在相对定位的基础上增加了height/width属性，以定位块级框大小。

      4.fixed，与第二项相似，只不过是相对浏览器窗口偏移的。

示例

relative示例：

<p style="position:relative;top:25em;left:25em;font-size:50px;">666</p>

效果如下：

将margin和它对比一下，还是它更稳定：

<p style="position:relative;top:25em;left:25em;font-size:50px;background-color:gray">使用了Position的</p>   

        <p style="margin-left:25em;font-size:50px;background-color:gray">使用了margin属性的</p>

absolute示例：

<div style="position:absolute;width:190px;height:300px;left:25em;background-color:red"></div>

3.红牌罚下

 <div style="position:absolute;width:190px;height:300px;left:25em;background-color:red">

        <p style="position:relative;left:0.5em;top:1em;font-size:40px;color:rgb(255,255,255);">红牌罚下</p>

  </div>