28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Je débute encore en développement et je fais face à un problème que je n'arrive pas à résoudre :

J'ai sur ma page d'accueil un diaporama full screen de 3 images. Je voudrais positionner au dessus le logo de la fondation, pourtant rien n'y fait : il n'apparaît pas.
Je n'ai pas codé moi-même ce diaporama, c'est une ressource que l'on m'a donné.
Si besoin voici le CSS correspondant (je n'ai collé ici que ce qui correspond aux images, pas les attributs d'animation ou ceux correspondants aux dots de navigation) :


[data-am-gallery] .image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


Et donc quand dans mon html je place le logo, il apparaît en arrière plan du diaporama, donc on ne le voit pas. J'ai tenté le z-index, mais il ne se montre toujours pas ... Le seul moyen pour qu'on le voit c'est de le placer dans la div qui contient mon diapo (avec la classe .container), mais à ce moment là il se place au dessus, sur fond blanc et pousse le diaporama vers le bas (c'est un .png). J'ai essayé float: left mais ça ne marche pas non plus, l'image disparaît à nouveau.

Je n'arrive pas à comprendre d'où vient le problème.. Smiley ohwell
Ok... Mybad, il a suffit que je pose la question pour que je trouve la solution.
Il restait une div que je pensais avoir supprimé, qui annulait la propriété z-index du logo.
Désolé, si ce sujet pouvait être fermé Smiley cligne .