定位div元素

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>

（Qazxswpoi）

Answer 1

你真是太近了只需添加以下内容......

jsfiddle

...并从

.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;
  }
}

Answer 2

使用位置

<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>

而不是absolute并且还给出astro div高度，它的高度为0，因为所有内容都是绝对定位的。

fixed

.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;
  }
}