具有 z-index 和位置类的 div答案

【问题标题】：divs with z-index & position class具有 z-index 和位置类的 div
【发布时间】：2010-05-29 23:55:03
【问题描述】：

在将 div 定位到页面中时，我需要您的帮助。我有以下 div：

- the header with z-index 10, position absolute, top 0, height 250px, width 100%
- wrapper with margin 0 auto, width 990 and inside
- the menu with z-index 8
- content to the right of the menu with z-index 9 so that i could scroll it below the header.

问题是我希望菜单具有固定位置，这是不可能的，因为它在 x 轴上不起作用，因为它在包装器之外。代码现在有点乱，但我想使用菜单项来滚动标题下方的大彩色框。

有什么想法吗？

谢谢太棒了

//样本图片 alt text http://www.m-lab.gr/sample.jpg

【问题讨论】：

标签： html css

【解决方案1】：

您想要的都是可能的，但这取决于您的所有相关元素的 css...html、body 等...

您可以发布您的代码或提供链接吗？

使用您的图片，这是一个工作示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt" dir="ltr">

  <head>
    <title>Fixed Menu and Header - Scrolling Content</title>

        <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

        <style type="text/css">
            html, body{margin:0;padding:0;width:100%;height:100%;}
            div.header {position:fixed;top:0;left:0;z-index:1;width:100%;height:200px;background-color:#787878;}
            div.menu {position:fixed;left:20px;top:220px;width:200px;height:350px;background-color:#9abd63;}
            div.wrapper{float:left;padding-left:260px;padding-top:220px;}
            div.blocks{width:600px;height:300px;margin:5px;}
            div#block1{background-color:#d9c548;}
            div#block2{background-color:#7e4041;}
            div#block3{background-color:#d9c548;}
            div#block4{background-color:#7e4041;}
            div#block5{background-color:#d9c548;}
            div#block6{background-color:#7e4041;}
            div#block7{background-color:#d9c548;}
        </style>

    </head>

    <body>

        <div class="header">This is the Header</div>
        <div class="menu">
            <ul>
                <li>Menu Opt 01</li>
                <li>Menu Opt 02</li>
                <li>Menu Opt 03</li>
                <li>Menu Opt 04</li>
                <li>Menu Opt 05</li>
                <li>Menu Opt 06</li>
                <li>Menu Opt 07</li>
            </ul>
        </div>
        <div class="wrapper">
            <div class="blocks" id="block1">Block 01</div>
            <div class="blocks" id="block2">Block 02</div>
            <div class="blocks" id="block3">Block 03</div>
            <div class="blocks" id="block4">Block 04</div>
            <div class="blocks" id="block5">Block 05</div>
            <div class="blocks" id="block6">Block 06</div>
            <div class="blocks" id="block7">Block 07</div>
        </div>

    </body>
</html>

只需复制并过去，它已经过测试！希望对您有所帮助！

【讨论】：

hi zuul，请检查我包含的图像，因为代码真的搞砸了。我会尽快发布的
嘿...图片出现了:)我会用一个工作示例给你一个答案...给我一些时间...