Boxes overlap each other - php

Question

so I got a while loop display the names and some css and jquery to make it so when you hover over one of the boxes made in the while loop it will have a little description telling about that result scroll up. But the problem is all the description boxes are overlapping each other. What am I doing wrong?
Css
.App_display {
border: 2px solid black;
padding:30px;
background:white;
border-radius:25px;
float:left;
width:190px;
height:100px;
margin:10px;
}
.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }
Jquery
<script>
$('.App_display').hover(function() {
$(this).find('.description').stop().animate({
bottom: '0px',
})
},
function() {
$(this).find('.description').stop().animate({
bottom: '-50px',
})
});
</script>
Html(This code is generated in a while loop)
<div class="App_display">
<div class="boxTop">
<div class="description"><?php echo $name; ?></div>
</div>
</div>
.App_display {
border: 2px solid black;
padding:30px;
background:white;
border-radius:25px;
float:left;
width:190px;
height:100px;
margin:10px;
}
.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }
<div class="App_display">
<div class="boxTop">
<div class="description">Item1</div>
</div>
</div>
<div class="App_display">
<div class="boxTop">
<div class="description">Item2</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.App_display').hover(function() {
$(this).find('.description').stop().animate({
bottom: '0px',
})
},
function() {
$(this).find('.description').stop().animate({
bottom: '-50px',
})
});
</script>

Answer 1

in css when you use position absolute it will set the position of the element relative to the first non static ancestor element, in your case probably the window.
so you need to set the next ancestor to a non static position then it will fix your issue
add to your App_display class this line:
.App_display {
position:relative;
}