Positionnement absolu, CSS et « replaced elements »

Positionnement absolu, CSS et « replaced elements » (le 16/03/2015)

Ce matin, j’ai eu un cas un peu bateau qui m’a fait tourner en bourrique pendant une bonne heure. Je cherchais à avoir un button qui prenne toute la largeur de son conteneur parent (qui lui est en position: relative).

Très logiquement, je l’affuble d’un position: absolute et je mets top/left/right/bottom à 0. Logique me direz-vous.

Sauf que cela ne marche pas du coup, et nulle part.

En recherchant un peu et en demandant sur Twitter, j’apprends que certains éléments sont qualifiés de « replaced elements ». En gros, ce sont des éléments dont l’apparence et les dimensions sont définis par une ressource externe. L’exemple typique est l’img (qui a ses propres dimensions), les object (plugins, etc.), mais aussi certains éléments de formulaires, comme les select, les button, textarea, etc. (ce qui peut se comprendre, étant stylés selon les systèmes/navigateurs).

Et des règles assez tordues existent, je vous passe le détail sur les « replaced elements » positionnés en absolu, mais en gros, dans mon cas tout simple du dessus, la spécification indique que la valeur de right sera totalement ignorée (ce qui confirme ce que la démonstration montre).

Ce n’est pas un bug, c’est une feature de la spécification.

Bref, en mettant un width: 100% au lieu de right: 0 dans mon cas, cela fonctionne (voir le pen ci-dessus avec la solution).

Pour en savoir plus sur le sujet :

On en apprend tous les jours avec CSS.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1654

3 commentaires

Posté par Raphael le 16/03/2015 à 10:28:36
Je pense que c'est le même principe que pour les autres "replaced" : tant que tu n'écrases pas la valeur intrinsèque de "width" de manière explicite, l'élément conservera sa largeur navigateur.
Et left: 0 + right: 0 ne suffisent pas à écraser un width, même intrinsèque.

Dans tes exemples, on voit bien que le problème ne se pose que sur width (qui est intrinsèque) et non sur height.

Sinon, c'est aussi résolu ainsi :

.conteneur {
display: flex;
}
.button {
flex: 1;
}

#FlexboxFTW (sourire)
Posté par Nico le 16/03/2015 à 10:30:24
Flexbox, ça marche pas partout (Sourire qui tue)
Posté par Victor Brito le 16/03/2015 à 10:51:51
Tu mixes les deux solutions et roulez, jeunesse… (clin d’oeil)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.