我试图对 DIV 元素进行负向定位（在示例中是 #content），但我的问题是 div 的容器（#wrapper2）获得了太多高度（实际上是 #content 给出的高度，但正如我'我将内容向上移动，我想相应地降低 #wrapper2 的高度）。
在这里我给你一个例子来展示我想要实现的目标。如果您尝试该示例，您会发现页脚与容器的距离太远。我可以在这里进行一个肮脏的黑客攻击，并将页脚设置为 top:-200px，但随后窗口的滚动条会超过页脚。
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
如果您有任何建议，请记住，我必须同时看到浅灰色和浅蓝色背景（它们是我网站上的图像），因此 margin-top: -200px 不是一个选项（就像有人在我的相关问题中建议的那样）已经搜索过了）
Thanks!
改变top财产给margin-top
Demo http://jsfiddle.net/hFftN/1
position: relative;
top: -200px;
变成
margin-top: -200px;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
