重叠绝对定位的内容

我在this page有点困难。它几乎可以正常工作。重叠绝对定位的内容

红色框应居中（h & v）在窗口上。作品。

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

当窗口小于400像素高时，滚动条应该出现，黄色框应该出现在滚动区域的底部。基本上我从来不想让黄框出现在红框上，反之亦然。不工作

任何人都知道我可以做到这一点？

谢谢。

来源

2009-08-17 Louis W

这给CSS添加#wrapper：

height: 100%; 
position: relative;

这部作品的原因是因为你绝对定位的元素由于没有任何其他containing block而相对于视口定位。通过将position: relative添加到#wrapper（或针对该问题的body），请确保包含的块代替整个主体内容。

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

来源

2009-08-17 23:06:17 mercator

宾果，这个按预期工作。谢谢。在IE6中不起作用，但我认为这不是一个大问题，如果可以的话，我可以添加最小高度的黑客。 – 2009-08-17 23:09:40

而实际上，你是否需要其他包装？因为给定所有当前的CSS，'＃wrapper'是不必要的。你可以将它的所有属性（包括上面的）移动到'body'。 – mercator 2009-08-17 23:13:35

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

来源

2009-08-17 22:42:04

永远不要他们占用相同的空间。如果视口小于可用区域，则页脚应低于徽标。 – 2009-08-17 22:48:27

z-index是你所需要的。虽然1000是有点过分简单

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

会做的伎俩

来源

2009-08-17 22:48:05 corymathews

要记住，这是非常有用的，不指定z-index，元素堆叠在z顺序的最新元素“最高”。所以，如果你想避免指定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更大的数量将导致#logo更高。

要强制滚动条时，视口窗口< 400像素，

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

来源

2009-08-17 23:01:52

如前所述，更改z-index只会使标志显示在页脚上方。我不希望它们重叠。如果视口被调整大小以缩短高度，那么两个项目组合起来应该显示滚动条并将页脚堆叠在徽标下方。 – 2009-08-17 23:06:14

溢出：滚动将始终显示滚动条，而自动将检测滚动条是否必要（正如您可能知道的），但只是澄清。 – Tres 2009-08-17 23:07:51

Z-Index在这里不是一个因素。 Z-Index仍然允许元素重叠 - 它只会指示哪个元素位于顶部。

使用浮子荷兰国际集团元件在凭证流红色DIV后，然后上的黄色用的清楚创建的元素之间的关系（即，黄色DIV将清楚红色和不会重叠）。

夹紧相对尺寸的元件（例如，height：100％）将会将黄色div推到屏幕的底部，但是要正确垂直对齐可能会很棘手。

来源

2009-08-17 23:08:25 jscharf

重叠绝对定位的内容

回答

相关问题