Jquery 我的背景图像被动画div块移动_Jquery_Html_Css_Background Image

Jquery 我的背景图像被动画div块移动

jquery html css

Jquery 我的背景图像被动画div块移动,jquery,html,css,background-image,Jquery,Html,Css,Background Image,我有一具有背景的尸体 body { background-image: url(/img/wand2.jpg); background-position: top; margin: 0px; padding: 0px; clear: both; } 首先，我有一个问题，它不能作为背景。它更像一个图像，只是出现在所有内容之后。但当我为这个div设置动画时 #media { float: left; background-color: yel

我有一具有背景的尸体

body {
    background-image: url(/img/wand2.jpg);
    background-position: top;
    margin: 0px;
    padding: 0px;
    clear: both;
}

首先，我有一个问题，它不能作为背景。它更像一个图像，只是出现在所有内容之后。但当我为这个div设置动画时

#media {
    float: left;
    background-color: yellow;
    height: 50px;
    width: 19%;
}

使用这个jquery代码

if($menuopen === false){
    $('#media').animate({
        height: '+=100px'
    });
});

我的背景图像被div推走了。你们知道怎么避免吗

编辑：好吧，我发现了我的错误。我还有

<img src="img/wand2.jpg" style="width:100%;"/>

要正确显示

但问题仍然存在，例如，为什么媒体仍然把一切都推到一边

#mainbox {
    position:fixed ;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    width: 60%;
    background-color: white;
}

html将如下所示：

<body>
    <div id="header"><div id="welt"></div><div id="helden"></div><a href="#" id="load_home"><div id="home">HOME</div></a><div id="media"></div><div id="impressum"></div></div>
    <div id="mainbox">

    </div>
</body>

如果您的最后一个问题是

为什么“媒体”div会把一切都推远？

，那么答案很简单。这是因为在这里它是静态定位的，这是一个默认值

检查以下代码段，该代码段将解释此“媒体”div如何影响不同的位置类型。然后为

#media

添加以下css属性，并再次运行该代码段

position:absolute;
z-index:9;

应用上述css属性后，“媒体”div将不会更改其他元素的位置。您可以在上找到不同定位之间的良好比较

$（文档）.ready（函数（）{
$（“#媒体”）。设置动画({
高度：'+=100px'
},1000);
});
html，正文{
宽度：100%；
身高：100%；
}
身体{
背景色：#ddd；
背景位置：顶部；
边际：0px；
填充：0px；
明确：两者皆有；
}
#主机箱{
位置：固定；
左边距：自动；
右边距：自动；
边缘顶部：100px；
宽度：30%；
背景色：白色；
}
#媒体{
浮动：左；
背景颜色：黄色；
高度：50px；
宽度：29%；
}
#相对的{
明确：两者皆有；
背景色：红色；
位置：相对位置；
宽度：30%；
}
#绝对的{
明确：两者皆有；
背景颜色：橙色；
位置：绝对位置；
宽度：30%；
}

1.固定位置
2.绝对位置-1
3.相对位置
4.绝对位置-2
你能用小提琴重新创建它吗？或者发布更多代码$menuopen
在您提供的内容中没有任何意义，并且没有htmladddisplay:inline到mediadisplay:inline不起作用，bot我想到了类似z-index的东西，但找不到解决方案。
position:absolute;
z-index:9;