Discussion :

[beekeep]

Bonjour,

j'ai une différence de rendu entre Firefox et Chrome (V >= 53) pour un élément en position absolute.

Depuis la version 53 Chrome fait comme si on appliquait un left: 0; à l’élément alors qu'il devrait être positionné à la suite des éléments présents avant lui.

Exemple sur Plunker: https://plnkr.co/edit/u3jh0o1KNmPBd7KuiiM0?p=preview

Est-ce qu'il y a un moyen de conserver le comportement "normal" dans Chrome?

[beekeep]

Résolu en utilisant un conteneur autour de l'élément à placer en absolu.

Plunker: https://plnkr.co/edit/zVOJGc46B6wSFwpS3TKL?p=preview

[Ecared]

Si tu l'entoures d'une div comme ça es-tu sûr de l'utilité de ton position absolute?

[beekeep]

Oui, un élément en absolu n'est pas limité par la taille de son conteneur. (ici le conteneur peut avoir un largeur égale à zéro)

[Ecared]

Ok c'est juste que j'ai tendance à éviter le plus possible l'absolute. Je préfère jouer sur la taille du conteneur ou sur les margin/padding mais si c'est dont tu as besoin tant mieux

[Invité]

Bonjour,

ton CSS me laisse perplexe.

Je ne vois ici aucun intérêt à utiliser un positionnement absolu.

On obtient le résultat voulu avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.absolute-content {
    background-color: tomato;
    /*flex: 1 1 0; à supprimer */
    /*position: absolute; à supprimer */
}

et sans div supplémentaire.

D'autre part, cette consigne ne sert à rien non plus :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.static-content, .absolute-content {
    display: flex; /* ?? */
}

[beekeep]

Oui c'est un exemple pour reproduire le comportement et il n'a pas grand intérêt.

Pour info c'est pour le dev d'un environnement de travail type EDI,
une zone d'onglets et possibilité de docker sur les cotés et en bas comme dans Visual Studio par exemple.

J'utilise le positionnement absolu pour les widgets dockés qui sont masqués automatiquement,
lorsqu'on les ouvre ils sont affichés au dessus du reste.