padding box与定位数值为0的绝对定位实例页面

展示

标题1

点击下面的按钮改变列表padding大小会发现右上角红色几个标签依然固定在那个位置，具有更强的是适应性。

标签1

标题2

这是很长的一段描述内容，为什么会这么长纯粹是为了多点文字撑场面。

标签2

标题3

这是很长的一段描述内容，为什么会这么长纯粹是为了多点文字撑场面+1。

标签3

改变列表padding大小

代码

• HTML：

  <a href="javascript:" class="list">
      <img src="book-cover.svg" class="cover">
      <div class="cell">
          <h4 class="title">标题1</h4>
          <p class="desc">这是...1。</p>
      </div>
      <span class="tag">标签1</span>
  </a>
  <a href="javascript:" class="list">
      <img src="book-cover.svg" class="cover">
      <div class="cell">
          <h4 class="title">标题2</h4>
          <p class="desc">这是...2。</p>
      </div>
      <span class="tag">标签2</span>
  </a>
  <a href="javascript:" class="list">
      <img src="book-cover.svg" class="cover">
      <div class="cell">
          <h4 class="title">标题3</h4>
          <p class="desc">这是...3。</p>
      </div>
      <span class="tag">标签3</span>
  </a>

• 核心CSS：

  .list {
    display: block;
    padding: 1rem;
    overflow: hidden;
    position: relative;
  }
  .cover {
    width: 60px; height: 80px;
    float: left;
    margin-right: .75rem;
  }
  .cell { overflow: hidden; }
  .title { margin: 0 0 .25rem; }
  .desc { color: gray; }
  .tag {
    position: absolute;
    right: 0; top: 0;
    height: 16px;
    padding: 0 .5rem 0 3px;
    font: 300 12px/16px a;
    background-color: #e00;
  }
  .tag::before {
    top: 0;
    content: "";
    position: absolute;
    left: -12px;
    border-width: 8px 6px;
    border-style: solid;
    border-color: #e00 #e00 transparent transparent;
  }