CSS相对定位具有负值和高度 [英] CSS relative positioning with negative value and height
问题描述
我试图负位置一个DIV元素（在示例中是#content），但我的问题是div的容器（＃wrapper2），获得太高的高度（实际上是#content给出的高度，但是因为我正在移动内容，我想减少＃wrapper2的高度）。
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
在这里，我给你一个例子来展示我想实现的目标。如果你尝试样本，你会看到页脚停留在离容器太远的距离。我可以在这里做一个脏的黑客，使页脚顶部：-200px太，但是窗口的滚动条超过了页脚。
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!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>
如果您有任何建议，请记住，我必须看到lightgrey和lightblue背景他们是我的网站上的图片），所以margin-top：-200px不是一个选项（像有人提出的相关问题，我已经搜索的人）
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
谢谢！
推荐答案
将顶部属性更改为 margin-top
position: relative;
top: -200px;
更改为
margin-top: -200px;
这篇关于CSS相对定位具有负值和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
