CODEWITHSUNDEEP
htmlcsspositioning
Hexana
Hexana

Reputation: 1135

Stop Relative Positioned Div Overlapping Other Divs

I have three divs stacked on top of each other (top, middle, bottom). In the middle div, I have an image crossfade using Javascript adapted from this fiddle by jfriend00.

The middle div has the position set to relative and the images within are all set to absolute. However what is happening is that that middle div is overlapping the bottom div.

I have mostly read that to contain absolutely positioned elements you must use a relative container, which I've used, however, I don't understand why my middle div is not flowing and stacking nicely between the top and bottom divs?

If I add a static height of 583px and width of 940px to the container, it flows correctly but doesn't respond. Ideally, it needs to work with a percentage width.

Here is what I have tried:

.container {position: relative; font-size: 0; width: 100%;}

/*.container {position: relative; font-size: 0; height: 940px; width: 583px;} this stops the box responding, which isn't what I want */

.slide {
border: none; 
opacity: 0; 
position: absolute; 
width: 100%;
top: 0; 
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

.showMe {opacity: 1;}

.top {display: block;}

.bottom {display: block;}



<div class="top">
        This is some test content. Top.
</div>

<div class="container">
   <img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
   <img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
   <img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
   <img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
   <img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
   <img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
   <img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>

<div class="bottom">
        This is some test content. Bottom.
</div>

Here is a fiddle to demonstrate the problem.

Would really appreciate any help with this one.

Upvotes: 3

Views: 4047

Answers (2)

Slava Eremenko
Slava Eremenko

Reputation: 2506

Here! Just make one of the slides relatively positioned, so that it can give its parent container its height!

https://jsfiddle.net/4ycxayb2/3/

Just add this:

.slide:last-child {
  position: relative;
}

Upvotes: 4

l.g.karolos
l.g.karolos

Reputation: 1142

This is what you want ?

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 7;

function nextImage() {
  var e;
  // remove showMe class from current image
  e = document.getElementById("slideimg" + curImage);
  removeClass(e, "showMe");

  // compute next image
  curImage++;
  if (curImage > numImages - 1) {
    curImage = 0;
  }

  // add showMe class to next image
  e = document.getElementById("slideimg" + curImage);
  addClass(e, "showMe");
}

function addClass(elem, name) {
  var c = elem.className;
  if (c) c += " "; // if not blank, add a space separator
  c += name;
  elem.className = c;
}

function removeClass(elem, name) {
  var c = elem.className;
  elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, ""); // remove name and extra blanks
}
#container {
  position: relative;
  font-size: 0;
  width: 100%;
}

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.showMe {
  opacity: 1;
}

.top {
  display: block;
  position: relative;
}

.bottom {
  display: block;
  position: relative;
}
<div class="top">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="bottom">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div id="container">
  <img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
  <img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
  <img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
  <img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
  <img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
  <img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
  <img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>

Upvotes: 1

Related Questions