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>

此外，我可以为您澄清/提供一个示例：

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

CSS定位div一个接一个

1 个答案: