简体繁体中英

How do I make the image go behind the menu bar when I scroll down in html & css?

原文 2019-08-19 09:24:00 5 6 javascript/ jquery/ html/ css

How do I make the image go behind the menu bar when I scroll down in html & css? i have tried some things but it does not help me out please help me if possible as this i really important for me enter image description here

 * { margin: 0; padding: 0; } body { width: 100%; height: 100%; background-color: #fff3cc; } .menu { background-color: rgba(0, 0, 0, 0.5); width: 100%; top: 0; position: fixed; } .menu ul { display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif; } .menu ul li { list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3 { float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif; color: #ff8c8c; } .active { color: #a5e5ff !important; } .slidershow { width: 500px; height: 500px; overflow: hidden; } .middle { position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); } .navigation { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar { width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover { background: #fff; } input[name="r"] { position: absolute; visibility: hidden; } .slides { width: 500%; height: 100%; display: flex; } .slide { width: 20%; transition: 0.6s; } .slide img { width: 100%; height: 100%; } #r1:checked~.s1 { margin-left: 0; } #r2:checked~.s1 { margin-left: -20%; } #r3:checked~.s1 { margin-left: -40%; } .about { margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1 { font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2 { font-family: "Lucida Grande", sans-serif; line-height: 50px; } p { font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn { margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner { height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a, #42455a), radial-gradient(circle at top left, #fd00da, #19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa { padding: 18px 0; font-size: 13px; cursor: pointer; } .small { margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; }

 <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>

i tried everything

How do I make the image go behind the menu bar when I scroll down in html & css?

6 answers

Please look into the z-index property.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

In your CSS simply add:

z-index:1

To your menu class.

You will need to learn more about z-index.

Freecodecamp offers a very good explanation on z-index: https://www.freecodecamp.org/news/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3/

But for a quick fix for your case, you can add a z-index to your .menu .

.menu{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 1;
}

Add .slidershow { z-index: -999;}

 *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #fff3cc; } .menu{ background-color: rgba(0,0,0,0.5); width: 100%; top: 0; position: fixed; } .menu ul{ display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; } .menu ul li{ list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3{ float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; color: #ff8c8c; } .active{ color: #a5e5ff !important; } .slidershow{ width: 500px; height: 500px; overflow: hidden; } .middle{ position: absolute; top: 50%; left: 25%; transform: translate(-50%,-50%); } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover{ background: #fff; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide img{ width: 100%; height: 100%; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } .about{ margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1{ font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2{ font-family: "Lucida Grande", sans-serif; line-height: 50px; } p{ font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn{ margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner{ height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a,#42455a),radial-gradient(circle at top left,#fd00da,#19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa{ padding: 18px 0; font-size: 13px; cursor: pointer; } .small{ margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; } .slidershow{ z-index: -999; }

  <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>

use z-index on your menu element

.menu{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 999;
}

.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

Just add z-index:1; to .menu class.

  .menu{
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        top: 0;
        position: fixed;
        z-index:1;  /* Add this */
    }

z-index : The z-index property specifies the stack order of an element. An element with greater stack order will always appears in front of an element with a lower stack order.

  *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #fff3cc; } .menu{ background-color: rgba(0,0,0,0.5); width: 100%; top: 0; position: fixed; z-index:1; } .menu ul{ display: inline-flex; float: right; margin: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; } .menu ul li{ list-style: none; margin: 0 20px; color: #fff; cursor: pointer; } h3{ float: left; margin-top: 30px; margin-left: 30px; font-family: "FuturaMedium",Futura,"Century Gothic",sans-serif; color: #ff8c8c; } .active{ color: #a5e5ff !important; } .slidershow{ width: 500px; height: 500px; overflow: hidden; } .middle{ position: absolute; top: 50%; left: 25%; transform: translate(-50%,-50%); } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 50px; height: 10px; border: 2px solid #fff; margin: 6px; cursor: pointer; } .bar:hover{ background: #fff; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide img{ width: 100%; height: 100%; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } .about{ margin-top: 100px; float: right; width: 50%; padding-left: 150px; margin-right: 40px; } h1{ font-family: "Lucida Grande", sans-serif; font-size: 30pt; line-height: 60px; } h2{ font-family: "Lucida Grande", sans-serif; line-height: 50px; } p{ font-family: Optima, sans-serif; font-size: 13pt; line-height: 30px; } .shop-btn{ margin-left: 250px; margin-top: 680px; display: inline-flex; } .shop-btn-inner{ height: 50px; width: 50px; border: 2px solid transparent; border-radius: 50px; background-image: linear-gradient(#42455a,#42455a),radial-gradient(circle at top left,#fd00da,#19d7f8); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } .shop-btn-inner .fa{ padding: 18px 0; font-size: 13px; cursor: pointer; } .small{ margin: auto 20px; cursor: pointer; font-size: 12px; color: #96ff8c; letter-spacing: 3px; }

 <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>

How do I make an image move when i scroll down?

How do I make a shadow appear under the navigation bar when I scroll down the page?

How do I make the banner image go down in mobile site

How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

How do i make a automatic scroll when people go on a page

How do I make my image go FROM rotated to straight (HTML, CSS, JS,)

How do I make the Drop down Button work html css

How do I make a “sticky menu” go back to it original class as I scroll back up?

CSS - Make a drop down menu sit behind a background image

How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript

暂无

暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make an image move when i scroll down? How do I make a shadow appear under the navigation bar when I scroll down the page? How do I make the banner image go down in mobile site How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is? How do i make a automatic scroll when people go on a page How do I make my image go FROM rotated to straight (HTML, CSS, JS,) How do I make the Drop down Button work html css How do I make a “sticky menu” go back to it original class as I scroll back up? CSS - Make a drop down menu sit behind a background image How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript

Related Tags

粤ICP备18138465号 © 2020-2024 STACKOOM.COM