position:relative和position:absolute的差别及使用方法

这几天在做项目时遇到做选项卡的功能时，标题和内容区域的背景颜色不同。且须要选到当前标题时，此标题以下会出现下边框及小三角边框，这样就会超出标题背景颜色需覆盖以下内容区域。这时就须要用到potition:absolute属性。

例如以下图所看到的的效果：

DOM结构：

<div class="active">
        <div class="active_t">
          <ul id="active_list" class="active_list clearfix">
            <li class="activeCur">
              <h2>活动一</h2>
              <h4>10月30日~11月20日</h4>
            </li>
            <li>
              <h2>活动一</h2>
              <h4>10月30日~11月20日</h4>
            </li>
          </ul>
        </div>
      </div>

<!--内容区域 -->

<div class="active_c">
        <div class="active_c_c">

                //这里是内容区域的内容

</div>

</div>

样式例如以下：

.active {
  height: 79px;
  border-bottom: solid 1px #e3ecef;
  position: relative;
  z-index: 0;
  width: 1110px;
  margin: 0 auto;
  padding: 0 0 0 60px;
}
.active .active_t {
  position: absolute;
  margin: 0px auto;
}
.active .active_t ul.active_list {
  padding-top: 15px;
  margin-left: -78px;
}
.active .active_t ul.active_list li {
  float: left;
  color: #ccc;
  margin-left: 78px;
  height: 71px;
  cursor: pointer;
}
.active .active_t ul.active_list li h2 {
  font-size: 28px;
  line-height: 40px;
  font-weight: normal;
}
.active .active_t ul.active_list li h4 {
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}
.active .active_t ul.active_list li.activeCur {
  position: relative;
  z-index: 999;
  color: #00addc;
  background: url("../images/active_list.png") no-repeat 0px 63px;
}
.active_c {
  background: #eaf4f6;
  overflow: hidden;
  clear: both;
}
.active_c .active_c_c {
  width: 1080px;
  padding: 35px 45px;
  margin: 0px auto;
  overflow: hidden;
}

总结一下：

这里最外的active的背景颜色为白色，能够设置最外层的宽度为1170而无论背景颜色（假设是其他的背景颜色，那可能就要在外面再设置一个层不固定宽度，）

事实上就是设置active的position:relative,这个是不固定宽度的有白色背景颜色的div，而active_t这个是有1170宽度的内层。再设置里面的li的高度为71px,整体的active的高度为79px，下边的带下边框及小三角的度度为8px。ul上面有15px的padding-top,本来79-15=64px，可是下边框加上小三角的高度为7px,所以64+7=71,即li高度为71px.