SALUT
cmcjma
Tu devrais arriver a regler ca avec le Z index !
expliquation
La propriété de feuille de style css z-index permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.Exemple de code :
- Code: Select all
.thumb{
position:relative;
z-index:10;
}
La propriété de feuille de style z-index css peut prendre la valeur de :
- auto, valeur par défaut, le bloc aura un "z-index" plus grand que le bloc précédent déclaré dans le code HTML.
- 0 à +00, nombre positif.
- inherit, hérite de la propriété de son parent (css 2)
La propriété de feuille de style z-index css est applicable sur toutes les balises HTML ou XHTML dont la valeur de la feuille de style position est égale à relative ou absolute.
fais un copie colle du code ci dessous tu vas voir ce que ca donne !
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/
div.c2 {
position: relative;
left: 10px;
top: -20px;
width: 300px;
height: 60px;
z-index: 1;
background-color: green;
}
div.c1 {
position: relative;
left: 0px;
top: 0px;
width: 300px;
height: 60px;
z-index: 10;
background-color: red;
}
/*]]>*/
</style>
</head>
<body>
<h3 class="codetitre">Interprétation du code détaillé de la propriété css z-index par ton navigateur.</h3>
<p>.calque1{position:relative; left:0px; top:0px; width:300px; height:60px; z-index:10; }<br />.calque2{position:relative; left:10px; top:-20px; width:300px; height:60px; z-index:1; }
</p>
<div id="Layer1" class="c1">calque 1 z-index : 10
</div>
<div id="Layer2" class="c2"><br />calque 2 z-index : 1
</div>
</body>
</html>
A+