个人中心
gpt4 book ai didi

javascript - 当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？

转载 作者：太空宇宙 更新时间：2023-11-03 19:54:56 24 4
gpt4 key购买 nike

当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？我已经尝试了一些东西，但它并没有帮助我，如果可能的话请帮助我，因为这对我来说真的很重要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>

我什么都试过了

当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？

最佳答案

您将需要了解有关 z-index 的更多信息。

Freecodecamp 对 z-index 提供了很好的解释: https://www.freecodecamp.org/news/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3/

但是为了快速解决您的问题，您可以在 .menu 中添加一个 z-index。

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

关于javascript - 当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57553854/

24 4 0
文章推荐： html - CSS:使悬停动画流畅
文章推荐： c# - 替换 PDF 中的特定文档
文章推荐： c# - 如何将我的字符串作为代码执行
文章推荐： javascript - 使用 JavaScript 更改内联 CSS
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com