Avoid div going under or over another div in position absolute

Question

I try to fix my problem which is : I have block with some text and under a div with some element in position absolute

.img-wrapper{
 position: absolute;
 bottom:0;
height: 0;
padding-bottom: 53%;
 width:33%;
 margin:0;
 z-index:10;
}

My problem is when I resize the window in Height the text is going under the div which is in position absolute How can I can avoid that ? I am looking for something like clear:both but for position:absolute

here is my jsfiddle : http://jsfiddle.net/ws9kpoe3/9/

and why you need position:absolute? you can probably describe what you want to achieve — Temani Afif, Oct 17 '18 at 14:16
Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — yckart, Oct 17 '18 at 14:45
Do you want the .img-wrapper contents to be pushed downwards? or do you want the text to go over top of it? — Tank, Oct 17 '18 at 14:50
@LuR Did you try setting the z-index of the text to be higher than the z-index of `.img-wrapper` http://jsfiddle.net/ws9kpoe3/12/ — Tank, Oct 18 '18 at 13:46

yckart · Answer 1 · 2018-10-17T14:43:02.350

Update

After clarification from OP, it seems that a complete rewrite is required. (The desired layout/effect is called sticky footer).

1. Solution

Remove any z-index css rules and rely on natural flowing/stacking of elements:

http://jsfiddle.net/ws9kpoe3/10/

.text {
  position: relative;
  height: 100%;
}
.monimage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.img-wrapper {
  position: absolute;
  bottom: 0;
  height: 0;
  padding-bottom: 53%;
  width: 33%;
  margin: 0;
}
.img2 {
  left: 33%;
}
.img3 {
  left: 66%;
}
.img-wrapper img {
  padding: 0;
  margin: 0;
  width: 100%;
}

<div class='img-wrapper img1'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img2'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img3'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>

<img src="http://94.23.46.98/img/FEUILLES_2.png" class="monimage"/>

<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dignissimos distinctio quasi necessitatibus quam expedita, error facere pariatur quas aut in explicabo voluptates recusandae, nemo rerum et enim est magni.
</div>

2. Solution

Add another z-index rule to the .text block:

http://jsfiddle.net/ws9kpoe3/11/

.text {
  position: relative;
  height: 100%;
  z-index: 101;
}
.monimage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.img-wrapper {
  position: absolute;
  bottom: 0;
  height: 0;
  padding-bottom: 53%;
  width: 33%;
  margin: 0;
  z-index: 10;
}
.img2 {
  left: 33%;
}
.img3 {
  left: 66%;
}
.img-wrapper img {
  padding: 0;
  margin: 0;
  width: 100%;
}

<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dignissimos distinctio quasi necessitatibus quam expedita, error facere pariatur quas aut in explicabo voluptates recusandae, nemo rerum et enim est magni.
</div>

<div class='img-wrapper img1'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img2'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img3'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>

<img src="http://94.23.46.98/img/FEUILLES_2.png" class="monimage"/>

sorry , I mean I don't want the div going over or under I want : [div text] [div with my picture] — LuR, Oct 17 '18 at 14:29
thanks for your help but I mean I want the text to stay on the top of ".img-wrapper i" even when I resize the window — LuR, Oct 17 '18 at 15:05

Avoid div going under or over another div in position absolute

1 Answers1