CODEWITHSUNDEEP
htmlcss
suburban-shawty
suburban-shawty

Reputation: 3

Positioning div elements

I would like to position the text that I have in the paragraph tags under the slideshow and not behind/in it. How would I go about that?

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

Upvotes: 0

Views: 42

Answers (2)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

You're so close. Just add the following ...

.astro, .astro > img {
  height: 550px;
}

... and remove height: 550px from your img tags, while change your position: fixed to position: absolute in your img tags.

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

Upvotes: 0

Itay Gal
Itay Gal

Reputation: 10834

Use position absolute and not fixed and also give the astro div height, it's height is 0 since all the content is positioned absolutely.

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

Upvotes: 1

Related Questions