将横幅放置在顶部作为顶层

Question

这是该页面的链接： http://whiterootmedia.com/test/test3

这是代码：

    <div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->"> 
    <ul id="banner_ul">
    <li id="wrm"><a href="http://whiterootmedia.com"><i>The homepage of White Root Media!</i></a></li>
    <li id="google"><a href="https://plus.google.com/u/0/b/115943543157099352927/115943543157099352927" target="_blank"><i>+1 us on Google!</i></a></li>
    <li id="facebook"><a href="http://www.facebook.com/pages/White-Root-Media/194381903928501" target="_blank"><i>Like us on Facebook!</i></a></li>
    <li id="twitter"><a href="http://twitter.com/#!/WhiteRootMedia" target="_blank"><i>Tweet about us on Twitter!</i></a></li>
    </ul>

    <div id="container" style="<!-- border:solid yellow 1px -->; display: table;">

    <div id="content" style="<!-- border:solid purple 1px; --> display:table-cell; ">
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.

    </div>

    <div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>

    </div>

    <div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>

我希望横幅位于顶层，而“容器”div 位于下面

Answer 1

这是一个演示： http://jsfiddle.net/Wyvk8/

我删除了您的内联 CSS 样式并应用了它们通过 CSS 规则如下：

html, body {
    height     : 100%;
    min-height : 100%;
}
#banner {
    position      : absolute;
    top           : 0;
    left          : 0;
    height        : 100px;
    width         : 100%;
    overflow      : hidden;
    background    : url('../../images/banner_repeat.jpg') repeat-x;
    z-index       : 2;
}
#content {
    position : absolute;
    top      : 100px;
    left     : 0;
    right    : 270px;
    bottom   : 100px;
    overflow : auto;
}
#right_column {
    position   : absolute;
    top        : 0;
    bottom     : 0;
    right      : 0;
    width      : 270px;
    z-index    : 3;
    background : url('../../images/treetrunk7.png') repeat-y;
}
#footer {
    position   : absolute;
    left       : 0;
    bottom     : 0;
    right      : 270px;
    height     : 100px;
    overflow   : hidden;
    background : url('../../images/grass.png') repeat-x;
    z-index    : 2;
}

我将 HTML 的嵌套方式更改为如下：

<div id="banner"> 
    <ul id="banner_ul">
        ...
    </ul>
</div>
    
<div id="content">
    ....
</div>
    
<div id="right_column">tree</div>

<div id="footer">grass</div>

上面代码的效果是 #header 元素位于顶部，#内容元素位于左侧并垂直居中，#footer 元素位于底部，#right_column 元素位于页面右侧。当内容溢出时，#content 元素会获得滚动条，并且滚动条会直接应用于该元素。

奖励回合

当页面太窄时，您可以使用 CSS 媒体查询隐藏右列：

@media all and (max-width: 500px) {
    #right_column {
        display : none;
    }
    #content, #banner, #footer {
        right : 0;
    }
}

这是一个演示： http ://jsfiddle.net/Wyvk8/1/（如果您使页面宽度小于 500 像素，右栏将会消失，仅在支持媒体查询的浏览器中）

Answer 2

您需要将 position:fixed 应用到您的顶部横幅，我假设元素 id“banner_ul”。这意味着它将像绝对定位一样位于页面布局之外，但不受滚动的影响；它总是位于 top: 0; left: 0; 相对于浏览器窗口。请记住适当调整其下方的所有容器，以便它们位于窗口顶部的[横幅的高度]，否则在页面加载时它们将与横幅重叠。

Answer 3

看来您已将横幅 div 包裹在所有元素周围，因此它不会分层在容器 div 的顶部，因为它也会影响该 div，因为它位于横幅 div 的内部。