html - 一个接一个的CSS定位div

Question

我正在尝试创建一个登陆页面，我计划在其中将一些固定的背景图像定位为固定在顶部的幻灯片，然后是另一个 div，其中包含网站的内容。然而，当前的 HTML 和 CSS 代码将两个 div 放在彼此之上。

检查现有代码并使用 position 属性并将父 div 设置为相对位置并将子 div 设置为相对位置也不起作用

.crossfade>figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
  z-index: -1;
  min-height: 700px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

#landing {
  position: absolute;
  top: 500px;
}

<div className="main">
  <div class="crossfade">
    <figure></figure>
    <figure></figure>
  </div>
  <div id="landing">
    <div className="container">
      <img />
    </div>
    <p> Hello </p>
  </div>
</div>

预期的 css 应该依次放置两个 div，同时保留顶部背景图片幻灯片，然后显示第二个 div。

Answer 1

我假设你的 CSS 的第一部分是你的 <div class="crossfade"> .如果是这样，你的淡入淡出和登陆<div>都有position: absolute ，这很可能导致它们相互堆叠。

如果您希望交叉淡入淡出并并排/从上到下着陆，我建议将两者都包裹在外部 <div> 中并使用 Flexbox。

.outer-container {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    
    /* Enable this if you want them to be top to bottom. */
    /* flex-direction: column; */
}

.crossfade, #landing {
    /* You might have to tweak the width based off of 
       margin, padding, and other dimensions. */
    width: 45%;
    height: 100px;
    border: 1px solid black;
}

<div class="outer-container">
    <div class="crossfade">Crossfade</div>
    <div id="landing">Landing</div>
</div>

此外，我能否为此澄清/提供一个示例:

while preserving the top background image slideshow and then showing the second div