relative定位和margin定位对比实例页面

展示

使用margin定位

点击图片应用.pk-1

使用relative定位

点击图片应用.pk-2

代码

• HTML：

  <div class="table">
      <div class="td">
          <h4>使用margin定位</h4>
          <img src="1.jpg" onclick="this.className='pk-1';">
          <p>点击图片应用<code>.pk-1</code></p>
      </div>
      <div class="td">
          <h4>使用relative定位</h4>
          <img src="1.jpg" onclick="this.className='pk-2';">
          <p>点击图片应用<code>.pk-2</code></p>
      </div>
  </div>

• CSS：

  .table {
      width: 300px;
      display: inline-table;
      table-layout: fixed;
  }
  .td {
      display: table-cell;
  }
  .pk-1 {
      margin-top: -50px;
  }
  .pk-2 {
      position: relative;
      top: -50px;
  }