[Résolu] Jouer avec zindex pour passer sous un menu

Salut,

Les cartes et autres canvas importés dans une page sont souvent les raisons qui nous poussent à jouer avec z-index pour nos éléments de navigation...

Dans votre cas, il faut appliquer le z-index sur cet élément :

.container-header {
  z-index: 1001; /* au minimum par rapport à votre carte, la valeur précédente étant de 10 */
}

Mais dans votre configuration plusieurs sélecteurs CSS entrent en conflit. Il faudrait par exemple supprimer totalement .position-sticky et .sticky-top et leurs règles pour tout configurer dans .container-header :

.container-header {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
    box-shadow: inset 0 5px 5px rgb(0 0 0 / 3%);
    position: sticky; /* modif' ici... */
    top: 0; /* ...là... */
    z-index: 1001; /* ...et encore là */
}

___
PS : attention, la carte n'est pas alignée sur votre grille, pour l'aligner il faudrait supprimer la marge de 10px sur l'élément .com-dpcalendar-timeline.

Bonjour
D'abords merci, la 1ère ligne fonctionne parfaitement
Néanmoins j'aurai besoin de comprendre si c'est obligatoire ou conseillé de faire plus ? par exemple en mentionnant les effets de bords/ répercussions pour ?
.position-sticky ?
.sticky-top ?
la marge de 10px sur l'élément .com-dpcalendar-timeline ?

Je demande cela, car en fait la plupart des feuilles de styles proviennent du cms joomla ou de l'extension calendrier. je ne fais qu'ajouter/modifier certains éléments pour améliorer le rendu mais je ne peux pas modifier les leurs car cela sera écraser à la prochaine maj.

Effectivement, dans ce cas ne touchez pas au plugin, mais il serait alors souhaitable de le déclarer en premier pour que vos règles puissent écraser les siennes en évitant tout un tas de !important.

En admettant que le fait de devoir changer l'ordre des appels de styles soit délicat pour vous ou ne vous convienne pas, vous pouvez garder votre feuille de styles déclarée en premier, mais il faut alors surcharger les règles ou les sélecteurs CSS pour que vos règles soient prises en compte. Sans nécessairement passer par !important : en effet, celui-ci pose parfois problème au cours du temps, à force d'en mettre partout dans le code. Quoique pour modifier le CSS d'un plugin tiers je trouve cela justifié.

Quelques exemples :

body .com-dpcalendar-timeline { /* on surcharge le sélecteur avec un élément parent */
  margin: 0;
}

:root .com-dpcalendar-timeline { /* idem, mais pour les geeks ! */
  margin: 0;
}

.com-dpcalendar-timeline {
  margin: 0 !important; /* la solution la plus simple, mais souvent trop radicale */
}

Modifié par Olivier C (25 Oct 2022 - 12:31)

Bonjour
Effectivement je ne peux pas revoir l'ordre du css lié à l'agenda qui vient après mon user.css
J'ai mis

body .com-dpcalendar-timeline { 
  margin: 0;
}
.container-header {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
    box-shadow: inset 0 5px 5px rgb(0 0 0 / 3%);
    position: sticky; 
    top: 0;
    z-index: 1001; 
}

Ok je pense avoir compris globalement , mais pas vraiment sur les conflits avec .position-sticky et .sticky-top ? car je ne vois pas la différence visuellement avec la ligne simple.
Je vois par contre l'agrandissement de la carte de .com-dpcalendar-timeline

HDcms a écrit :
Ok je pense avoir compris globalement , mais pas vraiment sur les conflits avec .position-sticky et .sticky-top ? car je ne vois pas la différence visuellement avec la ligne simple.

Des deux classes sont en partit redondantes, elles déclarent toutes deux la position en sticky. L'une d'entre elles ajoute un z-index plus un top à 0 : son top est ok, mais sont z-index: 1020 est écrasé par votre code.
Modifié par Olivier C (25 Oct 2022 - 16:03)

Ok merci pour ces précisions