28172 sujets

CSS et mise en forme, CSS3

Cacher div position relative

Bonsoir,

J'aimerai lorsqu'une div est présente dans une autre, qu'elle prenne ses dimensions et cache tout son contenu.

Voici un exemple :


<?php

?>
<!DOCTYPE html>
<html>
<head>
<style>
.conteneur {
    margin:0 auto;
    position:relative;
    width:400px;
    height:600px;
    border:1px solid black;
}

.contenu1 {
    margin:0;
    position:absolute;
    width:100%;
    height:100%;
    background:green;
}

.contenu2 {
    margin:0 auto;
    position:relative;
    width:300px;
    height:200px;
    background:red;
}
</style>
</head>
<body>
    <div class="conteneur">
        <div class="contenu1"></div>
        <div class="contenu2"></div>
    </div>
</body>
</html>


Si la div 'contenu1' est présente dans la div 'conteneur' comme ci-dessus je souhaite qu'elle cache la div 'contenu2' tout en gardant la position relative pour 'conteneur' et 'contenu2', si la div 'contenu1' n'est pas présente alors on voit 'contenu2'.

Quelqu'un aurait-il une solution ?
Modifié par maxtheirish (08 Mar 2012 - 11:05)
Difficile de répondre comme ça sans comprendre ce que tu veux vraiment faire.
En fonction de quoi la div contenu 1 ou 2 sera visible ?
La de suite je vois deux solution, utiliser les z-index ou alors avec du javascript mettre en display none ou visible la div qui doit apparaître.
Car je souhaite afficher un loader en Jquery, 'contenu 1' serait la div contenant le loader.
Donc en gros, en jquery je fait un prepend avec 'contenu 1' et je souhaite que ça cache tout le contenu de ma div 'conteneur'.
Je voulais trouver une solution en jouant avec les propriétés css mais j'ai opté pour le display:none sur 'contenu 2'.
Je n'y suis pas parvenu avec les z-index.
Modifié par maxtheirish (07 Mar 2012 - 18:48)
Pour qu'un bloc recouvre un autre, il existe une technique qui fonctionne bien :

.contenu1 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background: #fff;
}


PS : attention à bien fermer ta div .conteneur.
Sujet clos
Aller à