Admin/Dev

24
Mai
2018

Astuce CSS : Positionner un élément de manière absolue par rapport à son parent

Publié par sky

Voici une petite astuce toute simple, qui pourra certainement vous aider lors de la construction de vos pages HTML. Elle permet de positionner un élément HTML de manière absolue, par rapport à son élément parent.

Imaginons un bloc div "papa" qui contient un bloc div "fiston".

Mettre fiston en absolu, par rapport à la page, est assez simple, il suffit de définir sa position en absolu, puis d'indiquer l'emplacement, à gauche ou à droite, et en haut ou en bas.

#fiston {
position:absolute; top:0; left:0;
}

L'indication "absolue" est plus subtile qu'elle n'y parait. En effet, la position n'est pas absolue par rapport à la page, mais par rapport à son élément parent le plus proche, disposant lui même de la position absolue, ou relative. Et c'est ici qu'est l'astuce.

De base, l'ancêtre le plus proche disposant d'une position absolue ou relative est tout simplement la page. Pour rendre la position de "fiston" absolue à l'intérieur de "papa", il suffit de mettre "papa" lui-même en position absolue ou relative.

En absolu, "papa" perdrait sa position, et se placerait par rapport à son plus proche parent en absolue ou en relatif. Il est donc préférable de le mettre en relatif, ce qui veut dire, en relatif par rapport à sa position actuelle, sans indiquer aucun déplacement haut, bas, gauche ou droite.

#papa {
position:relative;
} #fiston {
position:absolute; top:0; left:0;
}

Ce n'est pas plus compliqué que cela.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer