Question

我想将段落标记中的文本放置在幻灯片下方，而不是后面/之中。我该怎么办？

.astro {
  position: relative;
}

img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 550px;
  width: 100%;
  animation: slideshow 12s linear 0s infinite;
}

img:nth-child(2) {
  z-index: 2;
  animation-delay: 4s;
}

img:nth-child(3) {
  z-index: 1;
  animation-delay: 8s;
}

@keyframes slideshow {
  25% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  91.66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="astro">
  <img src="https://images.complex.com/complex/images/c_crop,h_1009,w_1793,x_35,y_191/c_fill,g_center,w_1200/fl_lossy,pg_1,q_auto/bml3jrfcmmnhveupv5wq/astroworld-lead-sarah-montgomery" />
  <img src="https://pbs.twimg.com/media/DsRG3ldU0AAmswD.jpg:large" />
  <img src="https://pbs.twimg.com/media/DtEDa3EUcAA_QJ6.jpg" />
</div>

<div class="tour-bio">
  <h3>ASTROWORLD:Wish you Were Here Tour </h3>
  <p>Praesent luctus dapibus felis sit amet egestas. Donec dignissim sapien eget erat euismod, ac euismod lacus molestie. In auctor posuere ipsum, id venenatis orci pellentesque at. Pellentesque finibus justo eget velit fermentum rutrum. Aenean auctor urna
    sit amet nisi ullamcorper dapibus. Sed feugiat dolor ut nisi pharetra, vel pharetra metus semper. Aenean mattis suscipit venenatis. Suspendisse hendrerit consequat lacus, a rhoncus purus.
    <br>
  </p>
</div>

（jsfiddle）

Answer 1

使用位置absolute而不是fixed并给出astro div高度，因为所有内容都是绝对放置的，所以高度为0。

.astro {
  position: relative;
  height: 670px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 550px;
  width: 100%;
  animation: slideshow 12s linear 0s infinite;
}

img:nth-child(2) {
  z-index: 2;
  animation-delay: 4s;
}

img:nth-child(3) {
  z-index: 1;
  animation-delay: 8s;
}

@keyframes slideshow {
  25% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  91.66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="astro">
  <img src="https://images.complex.com/complex/images/c_crop,h_1009,w_1793,x_35,y_191/c_fill,g_center,w_1200/fl_lossy,pg_1,q_auto/bml3jrfcmmnhveupv5wq/astroworld-lead-sarah-montgomery" />
  <img src="https://pbs.twimg.com/media/DsRG3ldU0AAmswD.jpg:large" />
  <img src="https://pbs.twimg.com/media/DtEDa3EUcAA_QJ6.jpg" />
</div>

<div class="tour-bio">
  <h3>ASTROWORLD:Wish you Were Here Tour </h3>
  <p>Praesent luctus dapibus felis sit amet egestas. Donec dignissim sapien eget erat euismod, ac euismod lacus molestie. In auctor posuere ipsum, id venenatis orci pellentesque at. Pellentesque finibus justo eget velit fermentum rutrum. Aenean auctor urna
    sit amet nisi ullamcorper dapibus. Sed feugiat dolor ut nisi pharetra, vel pharetra metus semper. Aenean mattis suscipit venenatis. Suspendisse hendrerit consequat lacus, a rhoncus purus.
    <br>
  </p>
</div>

Answer 2

您是如此亲密。只需添加以下内容...

malloc(sizeof(char)*100)

...并从.astro, .astro > img { height: 550px; }标记中删除height: 550px，同时在img标记中将position: fixed更改为position: absolute。

img

.astro {
  position: relative;
}

.astro, .astro > img {
  height: 550px;
}

.astro > img {
  position: absolute;
  z-index: 3;
  width: 100%;
  animation: slideshow 12s linear 0s infinite;
}

img:nth-child(2) {
  z-index: 2;
  animation-delay: 4s;
}

img:nth-child(3) {
  z-index: 1;
  animation-delay: 8s;
}

@keyframes slideshow {
  25% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  91.66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

定位div元素

2 个答案: