css的学习（二）

      css定位属性（Positioning）允许对元素进行定位

     css为定位和浮动提供了一些属性，利用这些属性可以建立列式布局，将布局的一部分和另一部分重叠。

      css有三种基本的定位机制：普通流、浮动流、绝对定位

      css position属性有四种不同类型的定位

      1、static

       元素框正常生成，

       2、relative

       元素框偏移某段距离，元素仍保持定位前形状，原本空间保留

      3、absolute

       元素从文档流完全删除，原本空间关闭，定位后生成一个块级框。

      4、fixed

       类似于absolute

相对定位：

<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>


<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<p>相对定位会按照元素的原始位置对该元素进行移动。</p>

<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

 结果：

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

相对定位会按照元素的原始位置对该元素进行移动。

样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。

样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

 

 

绝对定位：

<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。
下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

 结果：