Come coprire un div

Question

Diciamo che abbiamo un div come segue:

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

Il testo può essere più a lungo. Quindi potrebbe essere 3 caratteri, 150 o 300. Il div ha un bordo di border: 1 px solid black su un background: white. C'è un modo per creare un altro div (con la posizione relative o absolute suppongo) che copra completamente questo div in modo che il testo sia illeggibile?

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> 

Qualcosa del genere potrebbe funzionare, potresti dover giocare con lo z-index per assicurarti che la tua casella bianca sia in cima. Fondamentalmente, quel div interno inizia nell'angolo in alto a sinistra del div esterno e ha le stesse dimensioni di esso.

Answer 2

Cosa stai cercando di ottenere? Per qualsiasi motivo hai bisogno di un altro div?

Se stai solo cercando di nascondere i dati perché non solo:

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

E garantire il testo è anche 'nero'

Answer 3

Non sono al 100% chiaro sul motivo per cui si sta tentando di farlo, ma mi sono chiesto se si è considerato di nascondere completamente il proprio div utilizzando la visibilità: nascosta; stile css.

Answer 4

CSS:

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

CSS (immagine di sostituzione):

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