0

I currently have a couple of slideshows going that require me to have the container to be position: relative; and its child elements (img's) must be position: absolute;

Like So:

HTML

<div class="frontimg">
   <div><img src="img/jackson.jpg"></div>
   <div><img src="img/custom.jpg"></div>
</div>

CSS

    .frontimg {
  width: 100%;
  text-align: center;
  position: relative;
}

.frontimg img {
  position: absolute;
  width: 50%;
}

And then a small js script to make them fade in and out.

I am having trouble positioning another div below it. The div below it just seems to be hidden under it.

Spencer Sproul
  • 3
  • 3
  • 2
    can you be more explicit, I am not sure I completely understand your question! – Gacci Apr 19 '16 at 22:41
  • you need to specify a height either in the parent div or in the inner div, otherwise you need javascript to achieve this effect. – Saul Guardado Apr 19 '16 at 23:14

5 Answers5

0

That's because the children of ".frontimg" are not the images, but the div's that surround them.

try this: 

.frontimg div {
  position: absolute;
  width: 50%;
}
Iulius
  • 668
  • 4
  • 14
0

If the images have a common height, you can simply give the .frontimg div either a set height, or bottom padding etc. to push the following elements down past the images. E.g. 

.frontimg {
  width: 100%;
  text-align: center;
  position: relative;
  padding-bottom: 110px;
}

.frontimg img {
  position: absolute;
  width: 50%;
}

.next {border: 5px solid #30353b; background: #e7e7e7; min-height: 100px;}
<div class="frontimg">
   <div><img src="https://unsplash.it/800/100"></div>
   <div><img src="https://source.unsplash.com/random/800x100"></div>
</div>

<div class="next">  
    <p>The following div</p>
</div>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • Unfortunately, the pictures don't have a set height. They are set using a width property. So they will be a different height dependent on the monitor. – Spencer Sproul Apr 19 '16 at 23:02
0

That div you want to stack under the slideshow is a static element, whilst the other elements are not (display:relative,absolute, fixed are out of the normal flow of static elements. Therefore you must assign that div a position of absolute, fixed, or relative so that it can interact with the other elements properly.

I added a demo that shows a div in two positions:

  • click the div to toggle it's position from static to absolute.

SNIPPET

var div = document.querySelector('.div');

div.addEventListener('click', function(e) {
  if (div.classList.contains('static')) {
    div.classList.remove('static');
    div.classList.add('absolute');
  } else {
    div.classList.add('static');
    div.classList.remove('absolute');
  }
}, false);
.frontimg {
  width: 100%;
  text-align: center;
  position: relative;
}
.frontimg img {
  position: absolute;
  width: 50%;
}
.div {
  border: 1px solid grey;
  height: 50px;
  width: 50%;
  pointer-events:auto;
  cursor: pointer;
}
.static {
  position: static;
}
.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
}
<div class="frontimg">
  <div>
    <img src="http://placehold.it/350x150/000/fff?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x150/00f/fc0?text=2">
  </div>
</div>
<div class="div static">DIV</div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

Based in this answer, you need javascript (Jquery in this case) for achieve this effect. Add this Jquery code in your js file.

var biggestHeight = "0";
$(".frontimg *").each(function(){
if ($(this).height() > biggestHeight ) {
  biggestHeight = $(this).height()
}
});

$(".frontimg").height(biggestHeight);
Community
  • 1
  • 1
Saul Guardado
  • 99
  • 6
0

Add another div - 

<div class = "someClass"> Some text </div>

Use position:absolute and assign a top property to define the position -

.someClass {
position: abolsute;
top : 40% //or whatever you like
}

You can also add a line break - <br>

Shivam Mishra
  • 1,731
  • 2
  • 11
  • 29