具有负值和高度的CSS相对定位

我试图负面定位一个DIV元素(在例子中是#content),但我的问题是div的容器(#wrapper2),得到太多的高度(实际上是#content给出的高度,但就像我’移动内容,我想相应地减少#wrapper2的高度.

在这里,我举一个例子来展示我想要实现的目标.如果您尝试该样本,您将看到该页脚距离容器太远.我可以在这里做一个肮脏的黑客并使页脚顶部：-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不是一个选项(就像我在相关问题中建议的那样) ‘搜索过)

谢谢！

解决方法

将top属性更改为margin-top

Demo

position: relative;
        top: -200px;

变成

margin-top: -200px;

具有负值和高度的CSS相对定位

解决方法

猜你在找的CSS相关文章