28173 sujets

CSS et mise en forme, CSS3

Position d'un DIV par rapport à un autre

Bonjour à tous,

Je rencontre actuellement un problème à pacer un bloc Div 2 par rapport à un bloc Div 1, il faut seulement savoir que le bloc Div 2 est à l'interieur du bloc Div 1 et que souhaiterai disposer le bloc div2 dans le coin en haut a gauche indépendamment de leur taille comme ci dessous:


http://momsse.free.fr/CSS/div.jpg


Donc on a le code html suivant:




<div class="bleue">
 
<div class="rouge">
</div>
 
</div>


Et puis le code CSS (provisoire) suivant:



.bleue
{
background-color:blue;
width:xxxxpx;
height:xxxxpx;
}
 
.rouge
{
background-color:red;
width:xxpx;
height:xxpx;
position:????;
top:???;
right:???;
}


En fait l'idée ca serait vraiment d'utiliser le coin en haut a droite du Div 1 comme référence à l'absolu, si quelqu'un a une idée de mise en oeuvre, je suis preneur, merci d'avance Smiley cligne
Salut,

Dans le .bleue tu mets un position relative et le .rouge une position absolue.

Après il faut mettre top:0 et right:0

Comme j'ai pas vérifié (pour les valeurs top et right) je ne suis pas sûr que ça fonctionne. Mais je pense que tu pourras trouver la suite Smiley cligne

A+
Hacken a écrit :
Salut,

Dans le .bleue tu mets un position relative et le .rouge une position absolue.

Après il faut mettre top:0 et right:0

Comme j'ai pas vérifié (pour les valeurs top et right) je ne suis pas sûr que ça fonctionne. Mais je pense que tu pourras trouver la suite Smiley cligne

A+


Merci pour ta contribution !

sur lequel des 2 tu met top:0 right 0, le rouge ou le bleu ?
Salut tazou Smiley cligne ,

en reprenant ce que dit Hacken, cela pourrait donner :
<!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" xml:lang="fr" lang="fr">
<head>
<title>div en absolute</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
.bleue {
position:relative;
background-color:blue;
width:500px;
height:500px;
}
.rouge
{
background-color:red;
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="bleue">
<div class="rouge">
</div>
</div>
</body>
</html>


Pour plus d'infos, voir sur openweb : position absolue et fixe.

A+
Modifié par Heyoan (03 Nov 2007 - 11:56)
Si je doit retenir une chose, c'est que:

Si je declare un div en position:relative, tous ses sous div positionner en absolute le seront par rapport a ce div ?

C'est bien ca ? Smiley cligne
Modifié par tazou (03 Nov 2007 - 12:00)
Tout dépend de ce que tu appelles "sous div" Smiley murf ! Par exemple un div orange en position:absolute; placé dans le div rouge va se référer à la position de ce dernier et non pas à celle du div bleue.

Par exemple :
[b]css[/b]
.bleue {
position:relative;
background-color:blue;
width:500px;
height:500px;
}

.rouge
{
background-color:red;
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
}

.orange
{
background-color:orange;
width:50px;
height:50px;
position:absolute;
bottom:0;
left:0;
}

[b]html[/b]
<div class="bleue">
	<div class="rouge">
		<div class="orange">
		</div>
	</div>
</div>

Le plus simple serait de (re)lire le tuto : Comment positionner les éléments en CSS ?

A+ Smiley smile
Sujet clos
Aller à