如何覆盖div

Question

假设我们有一个div如下:

<div class="post">Variable text</div>

文本可以更长.所以它可以是3个字符,150或300. div的边界border: 1 px solid black超过a background: white.有没有办法创建另一个div(有位置relative或absolute我猜)完全覆盖这个div,以便文本不可读？

Answer 1

<div class="post" style="position:relative">
     Variable text
     <div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:white"></div>
</div>

这样的东西可以工作,你可能必须使用z-index来确保你的白盒子在顶部.基本上,内部div从外部div的左上角开始,并且与它的大小相同.

Answer 2

CSS:

.outer { 
  position:relative;
  z-index:10;
}
.inner {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:20;
 }

CSS (image replacement):

.outer { 
  text-indent:-9999em;
  height:0;
  padding:100px 0 0 0;
  width:100px;
  background-image:url(100x100.jpg);
}

HTML:

<div class="outer">
  <div class="inner"></div>
  Text to Replace
</div>