Comment faire l'image aller derrière la barre de menus lorsque je fais défiler dans HTML & CSS? J'ai essayé certaines choses mais ça ne m'aida pas s'il vous plaît aidez-moi si possible si cela est vraiment important pour moi Entrez la description de l'image ici
p>
<html>
<head>
<title>Vista Digital Cameras</title>
<link rel="stylesheet" href="home.css" type="text/css">
</head>
<body>
<div class="container">
<div class="menu">
<h3>VISTA DIGITAL</h3>
<ul>
<li class="active">HOME</li>
<li>CAMERAS</li>
<li>SERVICES</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<div class="slide s1">
<img src="images/x-a5%20brown.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20black.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20turquoise.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
</div>
</div>
<div class="about">
<h1>About Us</h1>
<p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services,
and School.</p>
<h2>Sales</h2>
<p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable
staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p>
<h2>Services</h2>
<p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p>
<h2>School</h2>
<p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models,
as well as tutors who are certainly very competent in the field of photography.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="shop-btn">
<div class="shop-btn-inner"><i class="fa fa-play"></i>
</div>
<small style="margin-top: 20px; margin-left: 10px; color: #96ff8c" ;><b>SHOP NOW</b></small>
</div>
</div>
</body>
</html>6 Réponses :
Veuillez regarder dans la propriété https://www.w3schools.com/csssref/pr_pos_z-index.asp p> dans votre CSS ajout simplement Ajouter: P> z-index code>. z-index:1
S'il vous plaît, n'utilisez pas l'école W3SS comme référence. Leurs articles sont souvent obsolètes et parfois tout simplement faux. MDN est beaucoup plus complet et précis: développeur.mozilla.org/ EN-US / DOCS / Web / CSS / Z-Index
@RORYMCCROSAN MDN est également souvent obsolète, prenez donc soin d'utiliser celui-là comme évangile. Et tous les pages de W3sSchools ne sont pas des informations incorrectes. Celui-ci a, mais pas tous.
Utiliser z-index de votre élément de menu
Vous devrez en savoir plus sur Z-Index.
Freecodecamp offre une très bonne explication sur z-index: https: // www .freecodecamp.org / Actualités / Z-Index-Index-Index-Index-How-Stack-Empleurs-Emplois-Utilisation-CSS-7C5AA0F179B3 /
Mais pour une solution rapide pour votre cas, vous pouvez ajouter un index z à votre .menu .
Ajouter p> .slidershow {z-index: -999;} code>
<div class="container">
<div class="menu">
<h3>VISTA DIGITAL</h3>
<ul>
<li class="active">HOME</li>
<li>CAMERAS</li>
<li>SERVICES</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<div class="slide s1">
<img src="images/x-a5%20brown.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20black.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20turquoise.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
</div>
</div>
<div class="about">
<h1>About Us</h1>
<p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services, and School.</p>
<h2>Sales</h2>
<p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p>
<h2>Services</h2>
<p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p>
<h2>School</h2>
<p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models, as well as tutors who are certainly very competent in the field of photography.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="shop-btn">
<div class="shop-btn-inner"><i class="fa fa-play"></i>
</div>
<small style="margin-top: 20px; margin-left: 10px; color: #96ff8c";><b>SHOP NOW</b></small>
</div>
</div>
.menu {
background-color: rgba(0,0,0,0.5);
width: 100%;
top: 0;
position: fixed;
z-index: 10000; // any number higher than one
}
NB: any change will not be visible for you because the menu back-ground color obacity
Il suffit d'ajouter p> z-index: 1; code> à .Menu classe. z-index code>: La propriété Z-Index spécifie l'ordre de pile d'un élément. Un élément avec un ordre de pile plus important apparaîtra toujours devant un élément avec un ordre de pile inférieur. Strong> p>
<div class="container">
<div class="menu">
<h3>VISTA DIGITAL</h3>
<ul>
<li class="active">HOME</li>
<li>CAMERAS</li>
<li>SERVICES</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<div class="slide s1">
<img src="images/x-a5%20brown.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20black.jpg" alt="">
</div>
<div class="slide">
<img src="images/x-a5%20turquoise.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
</div>
</div>
<div class="about">
<h1>About Us</h1>
<p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services, and School.</p>
<h2>Sales</h2>
<p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p>
<h2>Services</h2>
<p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p>
<h2>School</h2>
<p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models, as well as tutors who are certainly very competent in the field of photography.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="shop-btn">
<div class="shop-btn-inner"><i class="fa fa-play"></i>
</div>
<small style="margin-top: 20px; margin-left: 10px; color: #96ff8c";><b>SHOP NOW</b></small>
</div>
</div>