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

在我的身体和背景图像必须像这样写

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?，那么答案很简单。这是因为它在静态定位，这是一个默认值。

请查看以下代码段，其中将说明此媒体＆＃39;不同位置类型的影响程度。 DIV。之后，为#media添加以下css属性并再次运行代码段

position:absolute;
z-index:9;

应用了以上css属性，＆＃39;媒体＆＃39; div不会改变其他元素的位置。您可以在css-tricks.com上找到不同定位之间的比较。

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: