Positioning an element after a relative positioned element

HTML & CSS
1

Can I position an element below a relative positioned element? I realise that position: relative takes the element out of the normal flow, but there’s usually a way round these things. Can’t figure one here though…

2

Sure :slight_smile:.

{position:relative} changes the stacking context but does not take the element out of the normal flow. In fact, applying positioning reference points (top, right,left,bottom) can move the relative element visually, but the space that it occupied is still preserved.

(EDIT: and then he added the CodePen… .)

2 Likes
3

The problem you have is that the absolute children (the images) are removed from the flow. In that case the parent div essentially has no height to push the <p> tag down.

Give your container a min-height same as your img height and you will see the p tag go down below.


.slide-container {
  position: relative;
  background:red;
  min-height:375px;
}
2 Likes
4

Thanks, Ray. I’d been trying max-height as I wanted it to be responsive. I see why that wasn’t working.

1 Like
5

That will require a different approach to your slideshow.

Normally to make an img scale up/down it gets wrapped in another element (div). That div then controls the img size.

EDIT
I think you will be able to use the padding-bottom trick on your container in this case.
That will also keep you from needing that extra div around the images.

2 Likes
6

Actually I had to wrap another div around your container to set the max-width.
Then you can use the image aspect ratio padding to set your container height.

See if this works for you :slight_smile:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

.wrap {
   max-width:500px; /*actual image width*/
}
.slide-container {
   position:relative;
   height:0;
   padding-bottom:75%; /*img height 375px ÷ width 500px = .75 aspect ratio*/
   overflow:hidden;
}

.slide-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height:auto;
}

.slide1 {
  animation: fade 8s;
}
.slide2 {
  animation: fade 8s 4s;
}
.slide3 {
  animation: fade 8s 8s;
}
.slide4 {
  animation: fade 8s 12s;
}
.slide5 {
  animation: fade-in 8s 16s forwards;
}

@keyframes fade {
    0% { opacity: 0; }
   60% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade-in {
    0% { opacity: 0; }
   50% { opacity: 1; }
  100% { opacity: 1; }
}

button {
}

</style>

</head>
<body>

<div class="wrap">
   <div class="slide-container">
      <img class="slide1" src="http://gandalf458.co.uk/slides/nature1.jpg" alt="">
      <img class="slide2" src="http://gandalf458.co.uk/slides/nature2.jpg" alt="">
      <img class="slide3" src="http://gandalf458.co.uk/slides/nature3.jpg" alt="">
      <img class="slide4" src="http://gandalf458.co.uk/slides/nature4.jpg" alt="">
      <img class="slide5" src="http://gandalf458.co.uk/slides/nature5.jpg" alt="">
   </div>
</div>
<p>Something below the slideshow...</p>

</body>
</html>
3 Likes
7

You could just force the items into one line and hide the overflow and then no need for absolute positioning or working out the padding.

e.g.

.slide-container {
  position: relative;
  max-width: 500px;
  overflow:hidden;
}

.slide-container img {
  width: 100%;
  height: auto;
  transform:translateX(-100%);
  float:left;
  margin-right:-100%;
}

.slide1 {
  animation: fade 8s;
}
.slide2 {
  animation: fade 8s 4s;
}
.slide3 {
  animation: fade 8s 8s;
}
.slide4 {
  animation: fade 8s 12s;
}
.slide5 {
  animation: fade-in 8s 16s forwards;
}

@keyframes fade {
    0% { opacity: 0; transform:translateX(-100%); }
   60% { opacity: 1; transform:translateX(0); }
  100% { opacity: 0; transform:translateX(-100%); }
}
@keyframes fade-in {
    0% { opacity: 0; transform:translateX(-100%); }
   50% { opacity: 1;  transform:translateX(0%);}
  100% { opacity: 1; transform:translateX(0%); }
}

button {
}

The transform could be made to happen straight away if you don’t want the slide in and out effect and just the fade.

3 Likes
8

Thanks gents, @Ray.H and @PaulOB

I will have to try these both out in new pens.

Cheers

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.