向下移动身体

时间:2016-01-27 17:07:27

标签: html css

我想将我页面上的所有内容都移动下来..我已经包含了'padding-top:50px;'在body标签中,它确实将所有内容都移动了..好的。 现在我想在新创建的50px空间中放置内容。但是没有任何东西出现或被切断,因为我猜它是超出页面界限的?

我还制作了一个包装器div并将所有页面内容放在其中并将其向下移动,但我仍然得到了在新创建的空间中看不到任何内容的相同效果。它反应相同。

有什么建议吗?

感谢

<style>
#body{
padding-top: 50px;
}

#cookieText{
z-index:10000;
position:absolute;
top:-30px;
left:327px;
width:270px;
font-family:Arial, sans serif;
font-size:9px;
color:#313131;
line-height:12px;
padding:5px 60px 5px 40px;
border-radius: 2px;
background-color:#efeff0;
border: 1px solid #bec2c3;
}
#cookieBtn{
position:absolute;
top:5px;
right:10px;
font-family:Arial, sans serif;
font-size:10px;
color:#fff;
line-height:12px;
padding:5px 5px 5px 5px;
border-radius: 5px;
background-color:#83878f;
border: 1px solid #7c8089;
cursor: pointer;
}
</style>

<div id="cookieText">
By installing blah blah blah
<div id="cookieBtn"><b>Got It!</b></div>
</div>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$("#cookieBtn").click(function(){
$("#cookieText").stop().animate({"top": "-100px"}, 200);
});
$("#cookieBtn").click(function(){
$("#body").stop().animate({"top": "-50px"}, 200);
});
</script>

1 个答案:

答案 0 :(得分:1)

你不应该使用衬垫来推倒身体&#34;你的网页。而是在你体内的内容之上的另一个区块。

<body>
    <div class="someHeader">fooheader</div>
    <div class="someContent">foocontent</div>
</body>

然后在你的css中指定

.someHeader {
    height: 50px;
}