Question

当用户在菜单上悬停一个链接时，我需要制作一个菜单，这是一个类别子类div应该在菜单后面滑动。但子类别div覆盖了类别div。如何让它们落在菜单后面？

HTML

<div class="categories3">
    <div class="parent3">
        <a href="http://test.app:8000/category/asperiores-impedit"> Asperiores impedit. <span class="caret-right"></span></a> 
        <div class="subcategory3">
            <a href="http://test.app:8000/category/illum-est"> Illum est. 1</a>
        </div>
    </div>
    <div class="parent3">
        <a href="http://test.app:8000/category/asperiores-impedit"> Asperiores impedit. <span class="caret-right"></span></a> 
        <div class="subcategory3">
            <a href="http://test.app:8000/category/illum-est"> Illum est. 2</a>
        </div>
    </div>
</div>

jquery的

 $('.parent3').hover(function(e) {
     e.stopPropagation();
     $(this).children('.subcategory3').animate({
        left: "100%"
    }, 300);

 }, function(e) {
     e.stopPropagation();
     $(this).children('.subcategory3').animate({
        left: "0"
    }, 300 );      
 });

CSS

.categories3 {
    position: relative;
    border: 1px solid #009688;
    background-color: #fff;
}

.subcategory3 {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #009688;
}

.parent3 a {
    display: block;
    padding: 10px;
}

.parent3 a:hover {
    background-color: #009688;
    color: #fff;
}

Answer 1

默认情况下，如果存在重叠，则DOM中稍后显示的元素会在其之前显示“上方”。您可以通过调整元素的z-index（CSS属性）来覆盖它。将您想要的“下方”设置为具有较低的z-index，并将您想要的“上方”具有较高的数字。

我在这里做了一个小提琴：http://jsfiddle.net/to84v4qr/1/对你的代码进行了一些额外的小CSS和JS更改，试图让你有一些视觉上的感觉。但是突出的变化是对CSS的以下补充：

.subcategory3{
  ...
  z-index: 1;
}
...
.parent3 a{
  position: relative;
  z-index: 2;
  ...
}

position: relative .parent3 a因为z-index不适用于未定位的元素（嗯，“静态”，默认值）。 subcategory3已经有了绝对的定位。

如何让div滑到其他人后面？

1 个答案: