How to cover a div

Let's say we have a div as follow:

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

The text can be any longer. So it could be 3 characters, 开发者_高级运维150 or 300. The div has a border of border: 1 px solid black over a background: white. Is there any way to create another div (with position relative or absolute i guess) that completely covers this div so that the text is unreadable?

<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>

Something like that could work, you may have to play with the z-index to make sure your white box is on top. Basically, that inner div starts at the top left corner of the outer div and is the same size as it.

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>

What are you trying to achieve? Any reasons you need another div?

If you're just trying to hide the data why don't you just:

<div class="post" style="background-color:black;">Variable text</div>

And ensure your text is also 'black'

I'm not 100% clear on why you are trying to do this, but I wondered if you have considered hiding your div completely using the visibility:hidden; css style.