Question

我有这段代码，

HTML

<div id="header-line"></div>
<div id="main-menu"></div>
<div id="content"></div>

CSS

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
}
#content {
    background-color: blue;
    height: 200px;
}

的Javascript

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});

Demo jsFiddle

我使用jQuery animate函数使中间DIV扩展其高度。但问题是它推下了底部的DIV。

如何让它在底部DIV上展开而不会将其向下推？

Answer 1

将html更改为

 <div id="header-line"></div>
 <div id="content">
     <div id="main-menu">Expands on hover</div>
 </div>

将jquery更改为

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});

将样式更改为

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
    position:relative;
    z-index:3;
}
#content {
    background-color: blue;
    height: 200px;
}

主要目的是将div放在另一个div中，然后它不会将底部div放下。

Working fiddle.

Answer 2

这是一个CSS问题，你必须添加位置：绝对;到绿色DIV，但你必须修复宽度：Test

#main-menu {
    height: 30px;
    background-color: green;
    position: absolute;
}

Answer 3

使用position:relative

将这两个元素包装在一个包装器中，可以实现您想要做的事情

通过这种方式，您可以绝对定位子元素，内容区域和内容。父母中的扩展栏（新div）

通过将它们设置为绝对值，它们将保持在原位，并且展开的div将基本上与下面的内容重叠：

此处示例http://jsfiddle.net/JuG6X/6/

Answer 4

在这里，你只需要为内容div设置新的高度。（#content）

http://jsfiddle.net/JuG6X/

Answer 5

像这样：

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#parent{
    position:relative;
}
#main-menu {
    height: 30px;
    background-color: green;
    width:100%;
    position:absolute;
    top:0;
    z-index:100;
}
#content {
    background-color: blue;
    height: 200px;
    width:100%;
    position:absolute;
    /* take into account : borders, margin, previous sibling height */
    top:30px;
}

http://jsfiddle.net/techunter/7ytgy/

这是许多其他人的解决方案之一。你需要添加一个具有相对位置的父#parent，它将作为其子女的参考。

Answer 6

在 css ，

中尝试此操作

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
    z-index:1;
    position:relative;
}
#content {
    background-color: blue;
    height: 200px;
    z-index:0;
    top:50px;
    position:absolute;
    width:100%;
}

工作小提琴 http://jsfiddle.net/JuG6X/14/

使用jQuery动画增加DIV的高度，而不会降低内容

6 个答案: