Faire passer une div devant une autre.

Fermé
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - Modifié le 29 sept. 2023 à 15:38
 Eritou - 30 sept. 2023 à 11:45

Bonjour,

Je tente de faire passer une div devant une autre, mais malgré les positions adéquates (d'après ce que j'ai lu), cela ne fonctionne pas.

Si quelqu'un pouvait m'aiguiller. Merci.

Mon HTML :

<header class="lddc">
	<div id="slider" class="sl-slider-wrapper">
		<div id="menu" class="navbar navbar-default navbar-fixed-top">
			<nav>
				<ul class="nav">
					<li class="logo_gauche">
						<a href="https://lddc.com" target="_blank"><img src="images/logoblanc_cut.gif" width="60" height="60" alt="logo"></a>
					</li>
					<li><a href="#jaune">Text</a></li>
					<li><a href="#1"</a>
					<ul>
						<li><a href="#green">a</a></li>
						<li><a href="#blue">b</a></li>
					</ul>
				</li>
				<li><a href="#rocknroll">Rock'n'Roll</a></li>
				<li><a href="Contact/formpage.html" target="_blank">Contact</a></li>
			</ul>
		</nav>
	</div>
	<div class="sl-slider" data-midnight="white">
		<div class="sl-slide" data-orientation="vertical">
			<div class="sl-slide-inner">
				<div class="bg-img bg-img-1"></div>
			</div>
		</div>
		<div class="sl-slide" data-orientation="vertical">
			<div class="sl-slide-inner">
				<div class="bg-img bg-img-2">
					<video autoplay loop muted="" playsinline="">
						<source src="./videos/lddcintro.webm"type="videos/webm">
							<source src="./videos/lddcintro.mp4"type="video/mp4"></video>
						</div>

Il faudrait que le slider passe devant le menu burger dont voici le HTML (seconde barre de nav)

        <div class="container">
        <div id="mySidenav" class="sidenav">
  <a id="closeBtn" href="#" class="close">×</a>
  <ul>
    <li><a href="#">A propos</a></li>
    <li><a href="#">Nos services</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<a href="#" id="openBtn">
  <span class="burger-icon">
    <span></span>
    <span></span>
    <span></span>
  </span>
</a>

Mes CSS :

#menu
{
	width: 100%;
	left: 0px;
	right: 0px;
	/* [disabled]text-align: right;
	*/
	color: #FFFFFF;
	z-index: 9999;
	margin: 0;
	background-color: transparent;
}

#menu.fixed
{
	position:fixed;
}
#slider {
	margin: 0px;
	height: 100vh;
}
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

/* Icône burger */
.burger-icon span {
display: block;
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  z-index: 9999;
}

Merci :)

1 réponse

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 745
30 sept. 2023 à 00:13

Bonjour

Je n'ai pas testé ton code pour voir exactement de quoi il retournait, mais vu que tu parles de passer devant, je pense que tu pourrais rajouter un z-index à ton slider


0

Bonjour jordane45,

Merci pour ta réponse.

Je me suis mal exprimé, désolé. Le slider se met dessous, pas derrière.

J'ai fait une capture qui j'espère montrera le problème.

Bon week-end.

0