我的背景图片被动画 div 块移动

Question

我有这身有背景

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%;"/>

我的body和background-image必须这样写

background-image: url("img/wand2.jpg");

才能正确显示。

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

#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>

Answer 1

如果您的最后一个问题是 why 'media' div is pushes everything away?，那么答案很简单。因为这里是静态定位的，是默认值。

检查以下代码片段，其中将解释不同的位置类型如何受此 'media' div 的影响。之后为 #media 添加以下 css 属性和运行代码段，

position:absolute;
z-index:9;

应用上述css 属性，'media' div不会改变其他元素的位置。您可以在 css-tricks.com.

上找到不同定位之间的很好比较

$(document).ready(function(){
    $('#media').animate({
        height: '+=100px'
    },1000);
});

html, body {
 width:100%;
 height:100%;
}

body {
    background-color: #ddd;
    background-position: top;
    margin: 0px;
    padding: 0px;
    clear: both;
}

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

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

#relative {
    clear: both;
    background-color: red;
 position:relative;
    width: 30%;
}

#absolute {
    clear: both;
    background-color: orange;
 position:absolute;
    width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="header">
  <div id="media"></div>
 </div>
    <div id="mainbox">1. fixed position</div>
 <div id="absolute">2. absolute position-1</div>
 <div id="relative">3. relative position</div>
 <div id="absolute">4. absolute position-2</div>

我的背景图片被动画 div 块移动

my background image gets moved by an animated div block

html

css

jquery

background-image