php - 盒子相互重叠

Question

所以我有一个 while 循环显示名称和一些 css 和 jquery 来实现它，所以当你将鼠标悬停在 while 循环中制作的其中一个框上时，它会有一些说明向上滚动的结果。但问题是所有描述框都相互重叠。我做错了什么？

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; }

查询

<script>
$('.App_display').hover(function() {
    $(this).find('.description').stop().animate({
        bottom: '0px',
    })
},

function() {
    $(this).find('.description').stop().animate({
        bottom: '-50px',
    })
});
</script>

Html(这段代码是在while循环中生成的)

<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

在 css 中，当您使用绝对位置时，它将设置元素相对于第一个非静态祖先元素的位置，在您的情况下可能是窗口。 所以你需要将下一个祖先设置为非静态位置然后它会解决你的问题

将这一行添加到您的 App_display 类:

 .App_display { 
        position:relative;
 }