当页面上只有图像时如何使菜单重叠

Question

我想将主菜单与图像合并，但仅当主菜单下有图像时（例如，如果导航栏下有一些文本，则主菜单白色部分将为黑色），这是一个示例我正在努力实现https://prestige-theme-vogue.myshopify.com/

这是我的代码（HTML + CSS + JavaScript）：

var options = {
  accessibility: true,
  prevNextButtons: true,
  pageDots: true,
  setGallerySize: false,
  arrowShape: {
    x0: 10,
    x1: 60,
    y1: 50,
    x2: 60,
    y2: 45,
    x3: 15
  }
};

var carousel = document.querySelector('[data-carousel]');
var slides = document.getElementsByClassName('carousel-cell');
var flkty = new Flickity(carousel, options);

flkty.on('scroll', function() {
  flkty.slides.forEach(function(slide, i) {
    var image = slides[i];
    var x = (slide.target + flkty.x) * -1 / 3;
    image.style.backgroundPosition = x + 'px';
  });
});

body {
  font-family: "Inter";
}


/*ANN BAR*/

.annbar {
  align-items: center;
  background-color: #000;
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  height: 2.5rem;
  justify-content: center;
  line-height: 24px;
}


/**NAVIGATION**/

.navigation {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /*  margin-top: 15px;*/
}


/*Menu items*/

.navigation .menu-items ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation .menu-items ul>li {
  margin-right: 10px;
}


/*Menu Logo*/

.navigation .logo {
  /* box-sizing: border-box; */
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 44px;
  margin: 0 0 auto;
}


/*Menu Icons*/

.navigation .menu-icons ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation .menu-icons ul>li {
  color: #000;
  margin-right: 10px;
}

.navigation .menu-icons li.cart {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.navigation .menu-icons li.cart img {
  margin-right: 5px;
}


/*Carousel*/

.hero-slider {
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.hero-slider .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( to bottom, transparentize(#0E1D33, 0.2), transparentize(#0E1D33, 0.8));
}

.hero-slider .carousel-cell {
  background: url(./assets/imgs/Header\ slider.png);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hero-slider .carousel-cell .inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
}

.hero-slider .carousel-cell .inner .sub-title {
  font-size: 2.2rem;
  line-height: 1.2em;
  font-weight: 200;
  font-style: italic;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}

.hero-slider .carousel-cell .inner .title {
  font-size: 3rem;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 40px;
}

.hero-slider .carousel-cell .inner .btn {
  border: 1px solid #fff;
  padding: 14px 18px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: #fff;
  text-decoration: none;
  transition: all .2s ease;
}

.hero-slider .carousel-cell .inner .btn:hover {
  background: #fff;
  color: #000;
}

.hero-slider .flickity-prev-next-button {
  width: 80px;
  height: 80px;
  background: transparent;
}

.hero-slider .flickity-prev-next-button:hover {
  background: transparent;
}

.hero-slider .flickity-prev-next-button .arrow {
  fill: white;
}

.hero-slider .flickity-page-dots {
  bottom: 30px;
}

.hero-slider .flickity-page-dots .dot {
  width: 30px;
  height: 4px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 0 solid white;
  border-radius: 0;
}

.hero-slider .flickity-page-dots .dot.is-selected {
  background: #f00;
  border: 0 solid #f00;
}


/*Welcome header*/

.welcome-header {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 20px;
  align-items: center;
}

.welcome-header h2 {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  font-size: 25px;
  line-height: 42px;
  color: #000000;
}

.welcome-header p {
  width: 816px;
  height: 60px;
}

.welcome-header .btn-welcome {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.css">

<header>
  <div class="annbar">
    <strong>Free Shipping</strong> On all order above $100
  </div>
  <nav class="navigation">
    <div class="menu-items">
      <ul>
        <li>Men</li>
        <li>Women</li>
        <li>Story</li>
      </ul>
    </div>
    <div class="logo">
      <h1>My page</h1>
    </div>
    <div class="menu-icons">
      <ul>
        <li><img src="assets/icons/search.svg" alt="search"></li>
        <li><img src="assets/icons/user.svg" alt="search"></li>
        <li class="cart"><img src="assets/icons/Cart.svg" alt="search">Cart(0)</li>
      </ul>
    </div>
  </nav>
</header>

<div class="hero-slider" data-carousel>
  <div class="carousel-cell">
    <div class="overlay"></div>
    <div class="inner">
      <h3 class="subtitle">Slide 1</h3>
      <h2 class="title">Flickity Parallax</h2>
      <a href="https://flickity.metafizzy.co/" target="_blank" class="btn">Tell me more</a>
    </div>
  </div>
  <div class="carousel-cell" ">
    <div class="overlay "></div>
    <div class="inner ">
      <h3 class="subtitle ">Slide 2</h3>
      <h2 class="title ">Flickity Parallax</h2>
      <a href="https://flickity.metafizzy.co/ " target="_blank " class="btn ">Tell me more</a>
    </div>
  </div>
  <div class="carousel-cell ">
    <div class="overlay "></div>
    <div class="inner ">
      <h3 class="subtitle ">Slide 3</h3>
      <h2 class="title ">Flickity Parallax</h2>
      <a href="https://flickity.metafizzy.co/ " target="_blank " class="btn ">Tell me more</a>
    </div>
  </div>
</div>

<div class="welcome-header ">
  <h2>Welcome to my page</h2>
  <p>Lorem ipsum Lorem ipsum</p>
  <a href="http:// " class="btn-welcome ">Our Story</a>
</div>
<script type="text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js "></script>

Answer 1

我认为这会起作用：

header {
    position: absolute;
    width: 100%;
    z-index: 99;
}

Answer 2

现在你可以在CSS中使用

:has()

body:has(.bannerImage) header {
    position: absolute;
    width: 100%;
    z-index: 99;
}

上述代码仅在页面包含

bannerImage

类时才有效，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </nav>
  </header>

  <div class="bannerSection">
    <img src="https://placehold.co/410x275/FF5400/FFFFFF/png" alt="" class="bannerImage">
  </div>
</body>
</html>