Position:relative et bottom:0px

25 juin 2007, 21:21

Salut à tous,

Alors je vous explique, je voudrais qu'un <div> se place tout au bas de son bloc conteneur. J'ai un code dans ce genre:

Code : Tout sélectionner

<div id="bla1">
	<div id="bla2">blablabla</div>
</div>

Et dans le CSS:

Code : Tout sélectionner

#bla1
{
	height:100px;
}

#bla2
{
	position:relative;
	bottom:0px;
}

Je voudrais donc que bla2 soit en bas de bla1 ...

Ce n'est pas comme ça qu'il faudrait faire ?

Si vous avez une idée ...

Merci d'avance

@++

25 juin 2007, 22:42

Modifie un peu, comme ceci par exemple :

Code : Tout sélectionner

#bla1
{
   position:  relative;
   height:    100px;
}

#bla2
{
   position:  absolute;
   bottom:    0px;
}

25 juin 2007, 22:53

Parfait, merci !

Est-ce qu'il y une explication particulière du pourquoi il faut mettre le premier en relatif et l'autre en absolu ?

25 juin 2007, 22:58

Un élément positionné en absolu le sera par rapport au premier élément parent lui-même positionné.

Mais un élément positionné en absolu sort du flux normal, contrairement à un positionnement relatif : donc le bloc parent en relatif ne sera pas couvert par les autres éléments de la page qui suivraient : si ru mets d'autre code après la fermeture de ce bloc contenant, il se mettra à la suite. Mais si tu positionnais ce même bloc en absolu, la suite se positionnerait en début de flux... par dessus ton bloc.

Fais des tests, tu verras que ça peut être instructif et/ou perturbant

25 juin 2007, 23:09

Merci pour l'explication

@++

Position:relative et bottom:0px

Qui est en ligne