Question

我有一个网页，其中页面的前25％是标题（其中包含图像）＆amp;页面的其余部分包含内容。

我试图让标题div显示为较低深度的图片作为内容div，因为当前标题图像溢出到内容div（故意）＆amp;当他们这样做时，他们搞砸了内容div中HTML元素的定位。

我的下面的代码应该使标题div显示在内容div下方，但它不会。你能帮我弄明白为什么＆amp;如何解决？

我的CSS：

html, body { height: 100%; width: 100%; }
    body       { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; }

    #outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
    #header         { width: 1200px; height: 25%;  background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: -5; }
    #main           { display: block; width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }
    #navBar         { float: left; height: 800px; width: 240px; background-color: red; } 
    #content        { float: left; height: 800px; width: 760px; background-color: yellow; }

    #kamaleiText    { float: left; }
    #kamaleiLogo    { float: left; padding-top: 30px; background-color: green; z-index: inherit; }
    #kamaleiLeaves  { float: right; z-index: -2; background-color: cyan; z-index: inherit; }

我的HTML如下：

<body>

    <div id="outerContainer">

        <!-- Knowtice if I set the images width to something smaller then everything is spaced out correctly, so these elements are not being shown below others when they should be -->

        <div id="header">
            <img id="kamaleiLogo" src="" alt="Pic1" height="98%" width="300px"/>      
            <img id="kamaleiLeaves" src="" alt="Pic2" height="300px" width="300px"/>
        </div>
        <br/>
        <div id="main">
            <div id="navBar">
            </div>

            <div id="content">
                abcdef
            </div>
        </div>
    </div>

</body>

Answer 1

你可以查看这个jsfiddle

基本上，我已将#outerContainer和#header相对定位，并增加了标题的z-index，使其显示在顶部

然后将标题中的pic1和pic2绝对定位，以便它们溢出到主要内容

上

#outerContainer { position: relative; background-color: #DCFF9A; height: 100%; width: 100%; }
#header         { position: relative; width: 1200px; height: 25%;  background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: 100; }
#kamaleiLogo    { position: absolute; top:0; left:0; padding-top: 30px; background-color: green; z-index: inherit; }
#kamaleiLeaves  { position: absolute; top:0; right:0; background-color: cyan; z-index: inherit; }

Answer 2

@mack;在您的#main div中有两个floated elements，因此首先clear可能对您有用

#main           { overflow:hidden;width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }

标题div图像应显示在较低的深度

2 个答案: