我需要你帮助将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轴,因为它在外部包装。这个代码现在有点乱,但是我想使用菜单项滚动标题下方的大彩色框。
有什么想法吗?
感谢 索
答案 0 :(得分:0)
你想要什么是可能的,但这取决于你对所有相关元素的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>
只是复制和过去,它已经过测试!希望它有所帮助!