Question

我正在尝试对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不是一个选项（就像有人建议的那样）我搜索过的问题）

谢谢！

Answer 1

将top属性更改为margin-top

Demo

        position: relative;
        top: -200px;

更改为

        margin-top: -200px;

Answer 2

对于将来的参考，我最终完成的是将wrapper1和包装器2上的图像合并到同一图像中（它们是背景图案），所以我现在只有一个包装器，我不需要相对位置的内容高于第二个，它只是跟随页面流。

最后我明白你不能在不使用某种Javascript的情况下删除不需要的高度。

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

2 个答案:

Demo