Question

  <div class="box small">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <div class="detail"> for more info click below</div>
    <div class="read-more"> click</div>
 </div>

Css

.detail{
      position: relative;
}
.detail:after{
  content: "";
  display: block;
  position: fixed; /* could also be absolute */ 
  bottom: 0;
  left: 0;
  height: 100%;
  width: 20%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2)
}

我想为这两个div添加背景：

 <div class="detail"> for more info click below</div>
 <div class="read-more"> click</div>

我无法添加包装div，所以我使用叠加技术：

Demo

我如何相对叠加到父框？

Answer 1

如果您不想包装这两个div 详细信息和 read-more 然后尝试这个......

HTML

<div class="box small">
    <p>Pellentesque habitant morbi tristique senectus et netus et             malesuada fames ac turpis egestas.</p>
    <div class="detail"> for more info click below</div>
    <div class="read-more"> click</div>
</div>

CSS

.detail,.read-more
{
      position: relative;
}

.detail:after,.read-more:after{
  content: "";
  display: block;
  position: absolute; 
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2)
}

使用伪元素叠加

1 个答案: