【问题标题】: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,请检查我包含的图像,因为代码真的搞砸了。我会尽快发布的
    • 嘿...图片出现了:)我会用一个工作示例给你一个答案...给我一些时间...
    猜你喜欢
    • 1970-01-01
    • 2016-04-03
    • 1970-01-01
    • 1970-01-01
    • 2012-11-22
    • 2013-04-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多