如何让 div 紧跟在 other 后面？

Question

我需要制作一个菜单，当用户将 link 悬停在菜单上时，这是一个类别子类别 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 后面的元素会显示在 "above" 之前的任何元素。您可以通过调整元素的 z-index (CSS 属性) 来覆盖它。为您希望 "below" 的对象提供较低的 z-index，为您希望 "above" 的对象提供更高的数字。

我在这里做了一个 fiddle：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 不适用于未定位的元素（好吧，"static"，默认值）。 subcategory3已经有了绝对定位。

如何让 div 紧跟在 other 后面？

How to make div slide right behind other?

jquery

menu