绝对位置使背景图像消失，我不知道为什么答案

【问题标题】：Position absolute makes the background image disappear and I'm not sure why绝对位置使背景图像消失，我不知道为什么
【发布时间】：2021-02-04 13:49:35
【问题描述】：

我不知道为什么我的背景图片被删除了，尤其是因为我可以在浏览器中使用检查元素看到 div 的高度和宽度几乎涵盖了整个页面。

错误出现在 .full-height 中，将位置从相对位置切换到绝对位置会导致图像消失。我也很好奇如何翻转图像背景的方向。

   * {
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
    }
    
    :root {
      --primary-color: #0f9d58;
      --background-color: #f0f3f7;
      --secon-color: #9da2ad;
      --grey: #7a7a7b;
      --white: #ffffff; /*shortcuts*/
    }
    
    a {
      color: unset;
      text-decoration: none;
    }
    
    body,
    html {
      background-color: var(--background-color);
      scroll-behavior: smooth;
      position: relative;
      overflow: hidden;
    }
    
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%; /*height 100% would mean the viewport*/
      z-index: 99;
      background: var(--background-color);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
    
    .menu-wrap {
      max-width: 1366px;
      margin: auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 1rem;
    }
    .menu div {
      display: inline-block;
      padding: 8px 20px;
    }
    .logo {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary-color);
    }
    
    .menu-item {
      margin-left: 1rem;
      font-weight: 600;
      color: var(--grey);
      transition: 0.5s ease-in-out; /*this reflects a state change*/
      cursor: pointer;
    }
    
    .menu-item:hover,
    .menu-item.active {
      color: var(--white);
      background-color: var(--primary-color);
      border-radius: 1rem;
    }
    
    .cart-btn {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f9d58;
      font-size: 2rem;
      cursor: pointer;
      transition: 0.5s ease-in-out;
    }
    
    .cart-btn:hover {
      background-color: #0f9d58;
      color: var(--white);
      border-radius: 1rem;
    }
    
    .fullheight {
      height: 100vh;
      position: relative;
      width: 100%;
    }
    
    .align-items-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .bg-img {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(images/main.jpg);
    }
    
    .bg-img-fixed {
      background-attachment: fixed; /*The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block CHECK*/
    }
    
    .container {
      width: 100%;
      max-width: 1366px;
      margin: 0 auto;
    }
    
    /*grid system*/
    
    .row {
      display: flex;
      flex-wrap: wrap;
    }

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,900&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
          rel="stylesheet"
        />
        <title>Fresh Food</title>
      </head>
      <body>
        <div class="container">
          <div class="nav">
            <div class="menu-wrap">
              <a href="#home">
                <div class="logo">FRESHFOOD</div>
              </a>
              <div class="menu">
                <a href="#home">
                  <div class="menu-item active">Home</div>
                </a>
                <a href="#about">
                  <div class="menu-item">About</div>
                </a>
                <a href="#menu">
                  <div class="menu-item">Menu</div>
                </a>
                <a href="#testimonial">
                  <div class="menu-item">Testimonials</div>
                </a>
              </div>
              <div class="right-menu">
                <div class="cart-btn">
                  <i class="bx bx-cart-alt"></i>
                </div>
              </div>
            </div>
          </div>
          <div
            class="fullheight align-items-center bg-img bg-img-fixed"
            id="home"
          ></div>
        </div>
      </body>
    </html>

【问题讨论】：

关于背景图片的方向查看这篇文章：sitepoint.com/css3-transform-background-image
背景图片消失了，因为你在正文中有overfow: hidden;。删除它，即使您有position: absolute;，图像也会重新出现。尽管如此，您为什么要将位置从相对更改为绝对？
我只是在做实验。我正在尝试学习 html 和 css，但其中很多对我来说仍然很困惑。所以我只是时不时地摆弄我的代码。
因此，没有理由将位置从相对更改为绝对。相对位置是适合您情况的最佳解决方案。

标签： html css

【解决方案1】：

关于将位置设置为绝对位置时消失的图像，这是因为您在正文中将溢出设置为隐藏

body,
html {
  background-color: var(--background-color);
  scroll-behavior: smooth;
  position: relative;
  overflow: hidden; /*this causes the background-image to disappear*/
}

删除此行，图像将重新出现。

关于背景图片的方向参见这篇文章https://www.sitepoint.com/css3-transform-background-image/或这篇stackoverflow帖子How to rotate the background image in the container?

【讨论】：

【解决方案2】：

正如其他人所说，您可以通过将overflow 标记更改为overflow: visible; 来显示背景图像。但这不是最好的方法。当您将位置和元素设为绝对时，您会将其从页面的正常流程中移除，那么会发生什么？父元素不知道子元素的高度和宽度，所以它无法确定它应该填充多少空间，所以折叠。如果您查看检查元素内的 container div，当您将位置设为绝对时，它的高度为 0。通过将其高度设置为 100vh，您的问题将通过更好的方法得到解决。你的容器类应该是这样的：

.container {
  width: 100%;
  height: 100vh /*add this line*/
  max-width: 1366px;
  margin: 0 auto;
}

【讨论】：

谢谢！我试图接受两者，但它不允许我。