bonjour,
je m'en remets au savoir ancestral de ce forum pour m'aider à trouver la réponse à mon problème. Je m'explique : Je fais des tests pour un futur site onepage avec une part d'effet parallaxe. J'aimerais positionner des séparateurs entre les écrans, et pour garder une image optimale, la caler en svg. Pour tester, j'ai placer 2 divs l'une en dessous de l'autre en relative et la 3e en absolute qui chevauche. Le soucis c'est que quand je réduis l'écran ça fait remonter le séparateur vers le haut, j'aimerais en fait garder sa position. J'en suis sûr que c'est tout bête comme manip mais je vois pas comment faire. Avez-vous la solution ? Je vous remercie d'avance.
le code html:
le code css :
je m'en remets au savoir ancestral de ce forum pour m'aider à trouver la réponse à mon problème. Je m'explique : Je fais des tests pour un futur site onepage avec une part d'effet parallaxe. J'aimerais positionner des séparateurs entre les écrans, et pour garder une image optimale, la caler en svg. Pour tester, j'ai placer 2 divs l'une en dessous de l'autre en relative et la 3e en absolute qui chevauche. Le soucis c'est que quand je réduis l'écran ça fait remonter le séparateur vers le haut, j'aimerais en fait garder sa position. J'en suis sûr que c'est tout bête comme manip mais je vois pas comment faire. Avez-vous la solution ? Je vous remercie d'avance.
le code html:
<html>
<head><link rel="stylesheet" type="text/css" href="style.css" /></head>
<body>
<div class="haut"></div>
<object class="milieu" data="transition-full.svg" type="image/svg+xml">
</object>
<div class="bas"></div>
</body>
</html> le code css :
html,body{
margin: 0;
padding: 0;
}
.haut{
max-width:100%;
height: 500px;
background-color: red;
position: relative;
z-index: 1;
}
.milieu{
width:100%;
position: absolute;
z-index: 2;
top:40%;
}
.bas{
max-width:100%;
height: 500px;
background-color: blue;
position: relative;
z-index: 1;
}