代码之家 › 专栏 › 技术社区 › Louis W

重叠绝对定位的内容

css-position css

2

Louis W · 技术社区 · 16 年前

我在工作上有点困难 this page

红色框应位于窗口的中心(h&v)。作品

黄色的盒子应该贴在窗户的底部。作品

当窗口小于400像素时,滚动条应出现,黄色框应出现在滚动区域的底部。 基本上,我从不希望黄色框出现在红色框上方,反之亦然。不起作用

有人知道我如何做到这一点吗?

谢谢

5 回复 | 直到 15 年前

1

2

mercator 16 年前

#wrapper :

height: 100%;
position: relative;

之所以这样做,是因为绝对定位的元素是相对于视口定位的,因为没有任何其他元素 containing block . 加入 position: relative 到 #包装纸 (或 body

height: 100% 然后只需要确保包含块至少到达视口底部。

2

1

user142019 user142019 16 年前

#footer{z-index: 1000;}
#logo{z-index: 1001;}

3

0

corymathews 16 年前

z索引是您所需要的。虽然1000有点过分,但这是一个简单的问题

#footer{ z-index:2; }
#logo{ z-index:3; }

我会成功的

4

0

David Thomas 16 年前

记住这一点很有用,但不需要指定 z-index ,反转html:

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

否则,正如另一个答案所建议的,为 #logo 而不是 #footer 将导致更高。

在查看端口窗口为<时强制使用滚动条;400px,

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

5

0

jscharf 16 年前

Z指数不是这里的一个因素。Z索引仍然允许元素重叠-它只指示哪个元素位于顶部。

使用浮动在文档流中红色div之后的ing元素,然后使用 清楚的 在黄色上创建元素之间的关系(即黄色div将红色和红色的标记将不会重叠)。

将相对大小的元件(例如。 )在两者之间,会将黄色div推到屏幕底部,但垂直对齐可能很困难。