Absolute et Relative

Bonjour et bonne année à toutes/toutes

J'ai un soucis que je n'arrive pas à résoudre :

J'ai un block A en relative dans lequel je mets deux block B et C en absolute (car ils doivent de chevaucher).

Le problème est que le plus grand des blocs en absolute n'a pas de hauteur prédéfinie don je ne peux pas la préciser. Seul leur largeur est définie et fixée.

du coup mon block A fait 1 pixel de haut (car sa hauteur n'est pas fixée et il ne contient de des blocs en abslute) et si je met un second block (D) à la suite ce dernier se retrouve derrière B et C.


Comment faire pour que la hauteur de A s'ajuste à la hauteur de B et C en gardant B et C en absolute ?

Merci.

exemple concret :

<style>
	.A {
		position: relative;

		width: 320px;
		border : 1px solid green;
	}
	.B {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 320px;
		border : 1px solid blue;
	}
	.C {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 100px;
		height : 30px;
		border : 1px solid red;
	}
</style>

<div class="A">
	<div class="B">
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
	</div>
	<div class="C">
		Block C
	</div>
</div>
<div class="D">
	fdgredg
</div>

bon, je sais dans cet exemple le block B pourrait etre en relatif et donc la hauteur de A serait fixée par la hauteur de B et le problème serait résolu.

Ca donnerait ça :

<style>
	.A {
		position: relative;

		width: 320px;
		border : 1px solid green;
	}
	.B {
		position: relative;
		width: 320px;
		border : 1px solid blue;
	}
	.C {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 100px;
		height : 30px;
		border : 1px solid red;
	}
</style>

<div class="A">
	<div class="B">
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
		Bloc B<br/>
	</div>
	<div class="C">
		Block C
	</div>
</div>
<div class="D">
	Block D
</div>

Mais imaginons que ni A ni B puissent être en relatif ?

Merci

Rapidement:

tarmax a écrit :
je mets deux block B et C en absolute (car ils doivent de chevaucher).

La position absolue sur les deux éléments n'est pas nécessaire pour créer le chevauchement.

tarmax a écrit :
Comment faire pour que la hauteur de A s'ajuste à la hauteur de B et C en gardant B et C en absolute ?

Impossible en CSS. Tu peux simuler ça en JavaScript, mais ça reste une béquille instable. À ta place, je construirais autrement cet espace.

Merci pour ta réponse.

Benjamin D.C. a écrit :
La position absolue sur les deux éléments n'est pas nécessaire pour créer le chevauchement.

Pas sur les deux mais on est bien d'accord qu'il l'a faut au moins sur un des deux, non ?

Benjamin D.C. a écrit :
Impossible en CSS. Tu peux simuler ça en JavaScript, mais ça reste une béquille instable. À ta place, je construirais autrement cet espace.

Tu as raison, je vais faire autrement car je ne veux pas surcharger en javascript pour cela.

Merci encore.

Tarmax

tarmax a écrit :
Pas sur les deux mais on est bien d'accord qu'il l'a faut au moins sur un des deux, non ?

Pas nécessairement non, une superposition peut être obtenue pour des éléments restant entièrement dans le flux, avec une marge supérieure négative par exemple.