[ Résolu ]Probleme background et contenu

Bonjour et bonne fêtes de fin d'année.
description du problème:
j'aimerais réorganiser ce bloc qui est générer par un moteur de Template .

<article>
<header> ... </header>
<div class=" "> ... </div>
<footer> ... </footer>
</article>

j'ai fait comme ça :

.boiteRendezVousCulturelsInner .slider_navigation article{    
    display:-webkit-box;    
    display:-ms-flexbox;    
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/*position de header*/
.boiteRendezVousCulturelsInner .slider_navigation article header{
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
            margin-top:-70px;
            background-color:pink;
}

Et le souci c'est que sous IE le texte contenu dans header est bien sur l'image qui est dans la div mais le background-color se trouve en dessous la div.
http://img15.hostingpics.net/thumbs/mini_691744miop2017.png

si vous avez une explication pour que IE laisse mon background-color au dessus.

Merci A+
Modifié par ali13 (17 Jan 2017 - 15:16)

Bonsoir.

Une explication ? Bug ?

Mais vous vous compliquez terriblement la vie avec Flexbox, order et une marge négative...

Pourquoi ne pas mettre le header dans le div, mettre div en position : relative, mettre header en position : absolute et régler la position du header en fonction de ce que voulez : par exemple, bottom : 0px; left : 0px;

Aller au plus simple est le plus sûr moyen de ne pas tenter le diable (ou le bug...).

ali13 a écrit :

Je n'ai pas réussi en position relative et de toute manière il aurais fallut tout de mème des marge négatives. non?

Non. Si vous ne pouvez pas toucher au HTML, il est peut-être possible de mettre article en position relative, et header en position absolute...

Merci.
Je vais essayer demain.
A+