javascript - 如何将一个 div 保持在另一个动画 div 后面

Question

我有一个带有一些图标的菜单栏，当用户将鼠标放在图标上时，我会显示一个动画 div，它是完整 div 的“一部分”。到目前为止一切顺利。

问题是动画div从应该在后面的div上滑下来...如果我使用position:absolute不起作用...

(我阅读了所有相关问题，但没有一个能解决我的问题)

这是 fiddle : http://jsfiddle.net/yhc1azb4/27/

HTML

<div id="menu">                        
    <ul class="itemMenu">
        <i id="item1">1</i>
    </ul>                                            
</div>                    

<div id="preview">    
</div>                            

<div id="home">                
    <p>This text should not slide down...</p>
</div> 

CSS

* {
    margin: 0px;
    padding: 0px;
}
div#menu {      
    padding-left:0;
    width: 100%;
    height: 70px;
    background-color: #000;   
}

div#preview {  
    position: relative; /* with "absolute" it doesn't work */ 
    z-index: 10;    
}

div#home {  
    z-index: 3;
    display: block;
    position: relative;                
}

.itemMenu {
    padding-left: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 70px;
    background-color: #000;   
}

.itemMenu i {
    font-size:2.5em;    
    color:#fff;
    background: #000;
    transition: background 0.2s linear 0s;
    width: 70px;
    height: 70px;
    padding: 25px;    
    position: relative;
}

.itemMenu i:hover {
    transition: background 0.2s linear 0s;    
    cursor: pointer;
}

.itemMenu i#item1:hover { background: #0000FF; }

.appear {
    z-index: 5;
    max-height: 1080px;    
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.5, 0.5, 0.5, 1);
}

还有 JS

$("document").ready(function() {                     
    $('.itemMenu i').mouseover(showPreview);
    $('.itemMenu i').mouseout(showPreview);
});                

function showPreview() {    

    var itemSelected = $(this).attr("id");   
    var action = event.type;     
    var prevShowDiv = '#preview';

    switch (itemSelected) {                
        case 'item1':
            var itemToChangeID = '#item1';
            var divToShowID    = '#div1';                     
            var backColor      = '#0000FF';
            var iconColor      = '#000';
            break;                                        
    }               

    if (action=='mouseover') {                    
        $("#preview").css("height", 20);                    
        $(prevShowDiv).css("background", backColor);                    
        $(prevShowDiv).addClass("appear");                           
    }

    if (action=='mouseout') {
        $("#preview").css("height", 0);                
        if ($("#preview").hasClass("appear")) { 
            $("#preview").removeClass("appear"); 
        }
    }
}        

Answer 1

添加position:absolute； 顶部:70px； 到 div#home。这将使文本的位置保持在您想要的位置。 70px 基于 .itemMenu div 的当前高度，因此您可以根据需要更改它。要了解更多相关信息，这是一篇关于定位的精彩文章:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ 。我这里有你的工作 fiddle :

$("document").ready(function() {                     
    $('.itemMenu i').mouseover(showPreview);
    $('.itemMenu i').mouseout(showPreview);
});                

function showPreview() {    

    var itemSelected = $(this).attr("id");   
    var action = event.type;     
    var prevShowDiv = '#preview';

    switch (itemSelected) {                
        case 'item1':
            var itemToChangeID = '#item1';
            var divToShowID    = '#div1';                     
            var backColor      = '#0000FF';
            var iconColor      = '#000';
            break;                                        
    }               

    if (action=='mouseover') {                    
        $("#preview").css("height", 20);                    
        $(prevShowDiv).css("background", backColor);                    
        $(prevShowDiv).addClass("appear");                           
    }
    
    if (action=='mouseout') {
        $("#preview").css("height", 0);                
        if ($("#preview").hasClass("appear")) { 
            $("#preview").removeClass("appear"); 
        }
    }
}           

* {
    margin: 0px;
    padding: 0px;
}
div#menu {      
    padding-left:0;
    width: 100%;
    height: 70px;
    background-color: #000;   
}

div#preview {  
    position: relative; /* with "absolute" it doesn't work */ 
    z-index: 10;    
}

div#home {  
    z-index: 3;
    display: block;
    position: absolute;
    top: 70px;
}

.itemMenu {
    padding-left: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 70px;
    background-color: #000;   
}

.itemMenu i {
    font-size:2.5em;    
    color:#fff;
    background: #000;
    transition: background 0.2s linear 0s;
    width: 70px;
    height: 70px;
    padding: 25px;    
    position: relative;
}

.itemMenu i:hover {
    transition: background 0.2s linear 0s;    
    cursor: pointer;
}

.itemMenu i#item1:hover { background: #0000FF; }

.appear {
	z-index: 5;
	max-height: 1080px;    
	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0.5, 0.5, 0.5, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">                        
    <ul class="itemMenu">
        <i id="item1">1</i>
    </ul>                                            
</div>                    

<div id="preview">    
</div>                            

<div id="home">                
    <p>This text should not slide down...</p>
</div>

祝你好运。