Bonjour,
Je suis débutant, qui se remet à jour sur le HTML5/CSS3 après des années sans toucher au développement web. Je suis actuellement en train de réaliser un site, et ai trouvé une solution pour réaliser un faux carrousel en me passant de Javascript. Je suis juste en train de me mettre à JS, et je ne souhaitais pas copier-coller des bouts de code sans en comprendre leur fonctionnement !
J'ai trouvé donc ce tutoriel que j'ai suivi et qui donne un très bon résultat. Il y a néanmoins une partie que je ne comprends pas, et qui concerne la propriété z-index.
Le tutoriel montre que le premier item du carrousel a pour propriété :
Ensuite, lorsque nous souhaitons naviguer dans notre carrousel, nous devons mettre un index supérieur pour les autres item, afin qu'ils arrivent au-dessus du premier item :
Ma question est la suivante :
Comment ça se fait que lorsque nous passons de l'item3 à l'item1, ou de l'item2 à l'item1, nous puissions voir l'item1 alors que son z-index est de 2 ? Est-ce que la propriété z-index : 3; s'applique uniquement lorsque les liens sont bel et bien ciblés ? Est-ce que les items 2 et 3 retrouvent un z-index de 0 lors qu'ils ne sont plus ciblés par un clic sur un lien ?
Je vous met le code HTML/CSS complet. Je précise qu'il marche, mais que je cherche juste à bien le comprendre parfaitement !
Code HTML :
Code CSS:
Merci d'avance pour votre aide !
Modifié par Bob_Volte (17 Jan 2016 - 15:39)
Je suis débutant, qui se remet à jour sur le HTML5/CSS3 après des années sans toucher au développement web. Je suis actuellement en train de réaliser un site, et ai trouvé une solution pour réaliser un faux carrousel en me passant de Javascript. Je suis juste en train de me mettre à JS, et je ne souhaitais pas copier-coller des bouts de code sans en comprendre leur fonctionnement !
J'ai trouvé donc ce tutoriel que j'ai suivi et qui donne un très bon résultat. Il y a néanmoins une partie que je ne comprends pas, et qui concerne la propriété z-index.
Le tutoriel montre que le premier item du carrousel a pour propriété :
.item1 {
z-index: 2;
opacity: 1;
}Ensuite, lorsque nous souhaitons naviguer dans notre carrousel, nous devons mettre un index supérieur pour les autres item, afin qu'ils arrivent au-dessus du premier item :
#target-item-2:target ~ .item2, #target-item-3:target ~ .item3
{
z-index: 3;
opacity: 1;
}Ma question est la suivante :
Comment ça se fait que lorsque nous passons de l'item3 à l'item1, ou de l'item2 à l'item1, nous puissions voir l'item1 alors que son z-index est de 2 ? Est-ce que la propriété z-index : 3; s'applique uniquement lorsque les liens sont bel et bien ciblés ? Est-ce que les items 2 et 3 retrouvent un z-index de 0 lors qu'ils ne sont plus ciblés par un clic sur un lien ?
Je vous met le code HTML/CSS complet. Je précise qu'il marche, mais que je cherche juste à bien le comprendre parfaitement !
Code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="carrousel.css"/>
<title>Mk1 - Accueil</title>
</head>
<body>
<div id="caroussel-wrapper">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>
<div class="caroussel-item item1">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet</p>
<a class="arrow ar-next" href="#target-item-2">next</a>
<a class="arrow ar-prev" href="#target-item-3">prev</a>
</div>
<div class="caroussel-item item2">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet</p>
<a class="arrow ar-next" href="#target-item-3">next</a>
<a class="arrow ar-prev" href="#target-item-1">prev</a>
</div>
<div class="caroussel-item item3">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet</p>
<a class="arrow ar-next" href="#target-item-1">next</a>
<a class="arrow ar-prev" href="#target-item-2">prev</a>
</div>
</div>
</body>
</html>Code CSS:
#caroussel-wrapper
{
position: relative;
width: 1000px;
height: 800px;
}
[id^="target-item"]
{
display:none;
}
.caroussel-item
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom:0px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.item1
{
background-color: blue;
}
.item2
{
background-color: red;
}
.item3
{
background-color: yellow;
}
.item1 {
z-index: 2;
opacity: 1;
}
*:target ~ .item1
{
opacity: 0;
}
#target-item-1:target ~ .item1
{
z-index: 3;
opacity: 1;
}
#target-item-2:target ~ .item2, #target-item-3:target ~ .item3
{
z-index: 3;
opacity: 1;
}
Merci d'avance pour votre aide !
Modifié par Bob_Volte (17 Jan 2016 - 15:39)
)
