html - 当我添加另一个 div 时，div 元素就消失了

问题描述

我正在尝试使用 html、css 和 javascript来模仿画布。

我遇到了一个问题，即 div.search-field 元素随着 div.test 添加到 section.content 中而消失。将 div.test 元素添加到 section.content 元素的目的是测试其滚动功能。

这是HTML代码：

<section class="content">
  <div class="search-field">
    <div class="search-field__bg"></div>
    <div class="search-field__front">
      <h2 class="search-field__heading">Design anything.</h2>
      <input type="search" class="search-field__input" placeholder='Try "Card"'>
      <svg class="navbar__icon-size-small">
        <use href="/img/svg/sprites.svg#icon-down-arrow"></use>
      </svg>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
      <a class="search-field__link">Search field quotes</a>
    </div>
  </div>
  <div class='test'>
    <div>test</div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test123</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test456</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test456</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test456</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test456</li>
      </ul>
    </div>
  </div>
</section>

这是我的CSS代码：

.search-field {
  position: relative;
  z-index: 0;
  width: 99%;
  height: 34.4rem;
  border-radius: .8rem;
  margin: 3rem auto;
  overflow: hidden;
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.search-field__bg {
  width: 100%;
  height: calc(100% + 30vh);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url(https://banner-static.canva.com/images/c4878dcc-0e7e-453f-adee-4c60971feb3d_20200523-DeskSpaceMint-Global-Desktop-2x.jpg);
  background-size: cover;
  background-position: 50%;
  transform: translateY(calc(-1vh));
  object-fit: cover;
}

.search-field__front {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.search-field__heading {
  font-size: 4.8rem;
  font-weight: 700;
}

.search-field__link {
  display: block;
}

这是我在 codepen 上的项目。如果您删除整个 div.test 元素或将其注释掉，则 div.search-field 应该会正确显示。这是我在 netlify 上的项目。

那么我该如何修复这个错误呢？

标签： htmlcss

html - 当我添加另一个 div 时，div 元素就消失了

问题描述

解决方案

推荐阅读