Supprimer espace laissé par une div déplacée

Bonjour à tous,

Je ne trouve pas de solution à un problème

Je dois positionner une div dans une cellule en la faisant dépasser de 30 px au dessus de la cellule.

J'ai donc mis un positionnement relatif et un top à -30 px. Cela fonctionne sauf l'espace laissé par le déplacement est toujours comptabilisé dans la cellule comme si le div était à sa place initiale.

Comment faire sauter cet espace pour faire en sorte que ma cellule s'adapte bien au bas de mon div déplacée ?

Merci à vous !

Bonsoir,

C'est le principe même du positionnement relatif. L'élément sur lequel on l'applique est décalé par rapport à sa position initiale, mais l'espace qu'il occupait initialement est conservé.

Pour que l'élément sorte complètement du flux courant et ainsi éviter la conservation de son espace initial, il faut recourir à un positionnement absolu (position: absolute;).

Quelques liens utiles :
- Guide de survie du positionnement CSS
- Initiation au positionnement CSS (partie 1)
- Initiation au positionnement CSS (partie 2)
Modifié par jeremy-p (22 Apr 2012 - 19:08)

Bonjour Jérémy,

Merci pour ta réponse, le problème est que le positionnement absolue se fait par rapport à l'ensemble de ma page, et je ne peux connaitre avec précision le positionnement de cette cellule . Y'a t'il une solution ?

Merci à tous

Oui, il y en a une : positionner l'élément parent de votre <div>.

Un élément recevant la déclaration position: absolute; est placé par rapport à son ancêtre positionné le plus proche. En l'absence d'un ancêtre positionné, c'est à la fenêtre du navigateur qu'il va se référer. Exemple rapide :

HTML :

<div class="parent">
	<div class="enfant">Élément positionné</div>
</div>

CSS :

.parent {
	[b]position: relative;[/b]
	width: 200px;
	height: 100px;
	background-color: red;
}

.enfant {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 25px;
	background-color: green;
}

Grâce au positionnement relatif appliqué au parent, celui-ci va servir de référent à l'enfant. Ce dernier sera positionné en haut à droite du parent et plus de la fenêtre du navigateur.

Lisez avec attention les liens que j'ai donné dans le précédent post et ce principe deviendra très vite un automatisme !
Modifié par jeremy-p (22 Apr 2012 - 19:29)

Merci Jérémy pour cette réponse clairement illustrée, je fais un essai tout de suite et je reviens vers vous

Merci également pour les liens