CSS: Comment puis-je cacher (Positionnement à un endroit que l'utilisateur ne peut pas voir) une div avec les paramètres de l'index Z?

Question

Comment puis-je cacher (Laissez-le sur la page quelque part et l'utilisateur ne devrait pas le voir) une div en utilisant quelques astuces avec Z-Index? Je ne veux pas mettre style = "display: none;" à la div pour le cacher.

Des pensées? Vous recherchez une solution qui fonctionne dans les principaux navigateurs

Answer 1

Utilisez visibility: hidden ou modifiez l'opacité. Cela permettra à l'élément d'être dans la mise en page du document (il occupera de l'espace), mais il ne sera pas affiché. Si vous ne voulez pas qu'il occupe la mise en page, alors display: none devrait être ce que vous utilisez. Je ne recomment pas en utilisant z-index à cet effet.

Answer 2

<style type="text/css"> 
    div#over { 
     height: 50px;    // must be same height as 'under' div 
     background-color: gray; // needs some kind of background 
     z-index: 0;    // must be higher than 'under' div 
    } 
    div#under { 
     height: 50px;    // must be same height as 'over' div 
     position: relative;  // relative to where i would be normally 
     top: -50px;    // negative of my height 
     background-color: red;  // bloody mess 
     z-index: -1;    // must be lower than 'over' div 
    } 
</style> 

<p>What's going on?</p> 

<div id="wrapper"> 
    <div id="over">Move along, nothing to see here.</div> 
    <div id="under">GHASTLY MURDER ZOMG</div> 
</div> 

Answer 3

Il existe trois façons évidentes d'y parvenir, mais aucune d'entre elles n'utilise l'index z.

J'ai mis en place un JS Bin demo pour que vous puissiez jouer avec, pour voir les options en action, et certaines des conséquences de l'utilisation d'une approche particulière.

En bref:

1. opacity: 0;
2. position: absolute;
3. height: 0; width: 0; overflow: hidden;