如何覆盖特定于叠加的div？

Question

我想覆盖一个特定的div，其中div的宽度和高度是可变的。我怎么能这样做？

以下是fiddler供参考。

＆＃13;

＆＃13;

.c1 {
  border: 1px solid red;
  padding: 10px;
  margin: 5px;
}

.overlay {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);;
    opacity: 1;
}

＆＃13;

<p>
  content before
</p>
<div class="c1">
  <div class="overlay"></div>
  <div class="c2">
    <h1>
      some content
    </h1>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
    </p>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
    </p>
  </div>
</div>
<p>
  content after
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当宽度和高度可变时，您可以使用定位父级和叠加容器来获取它。将父 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:duration="100" android:drawable="@drawable/tugs_00000"/> <item android:duration="100" android:drawable="@drawable/tugs_00001"/> <item android:duration="100" android:drawable="@drawable/tugs_00002"/> ... <item android:duration="100" android:drawable="@drawable/tugs_00043"/> </animation-list> 位置设为.c1，将relative位置设为.overlay。请查看下面的代码段以供参考。

absolute

.c1 {
  border: 1px solid red;
  padding: 10px;
  margin: 5px;
  position: relative;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.85);      
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}