CSS定位div一个接一个答案

【问题标题】：CSS positioning div one after anotherCSS定位div一个接一个
【发布时间】：2019-06-29 18:31:23
【问题描述】：

我正在尝试创建一个登陆页面，我计划将一些固定的背景图像定位为固定在顶部的幻灯片，然后是另一个 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。

【问题讨论】：

标签： html css reactjs position

【解决方案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>

另外，我能否澄清/提供一个例子：

同时保留顶部背景图片幻灯片，然后显示第二个 div

【讨论】：