使用位置时重置位置:fixed
我想做一个网站，其中(动态的高度)页眉和页脚有一个固定的位置。内容应该直接从标题下面开始。我做了一个快速的example。(黄色和红色的顶部位置相同，我希望黄色DIV从红色DIV的下方开始。)
如果将标题位置设置为固定，则内容DIV将放置在标题的相同顶部位置。
例如，如果使用float，则可以使用clear: both来重置位置，是否也可以使用position : fixed？
回答 6
Stack Overflow用户
发布于 2012-04-06 23:18:53
仅CSS解决方案
使用某种方法填充标题在屏幕顶部所占的空间：
padding-top:margin-top:position:relative + top:
然后有一个单独的CSS样式表来更改常规viewport与移动viewport的height。
(或者参见下面的动态设置height属性的JavaScript解决方案。)
- jsFiddle
HTML：
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
</body>
</html>CSS (常规版本)：
#header {
position:fixed;
height:100px;
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative;
top:101px;
}CSS (手机版)：
#header {
height:50px;
}
#wrapper {
top:51px;
}JavaScript解决方案
HTML (可复制粘贴)
<head>
<style>
#header {
position:fixed;
height:100px; /* try different values here! */
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative; /* look Mom no height! */
}
</style>
</head>
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
<script language="javascript">
document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
</script>
</body>
</html>Stack Overflow用户
发布于 2012-12-07 12:49:24
我知道这是一个老帖子，但最近我自己也遇到了这个问题。所以我想我会分享我的解决方案(尽管我还没有完全测试它-在这里添加免责声明)。
我在固定的容器(页面顶部)下面创建了另一个容器(div)，具有相同的设置、类等和内容。
然后我添加了一个样式，将第二个div重置为position:static，visibility:hidden。你真的不需要隐藏它，因为它被固定的div完全覆盖了；但以防它是一个不能识别位置的旧浏览器:已修复。
无论如何，这将在你的内容上方给你一个缓冲区，这个缓冲区应该始终是正确的高度。缺点是，如果有动态内容，那么这个区域将在页面中包含两次，但您需要该内容来确保隐藏的div是正确的高度。
不是一个完美的解决方案，但我能想到的最好的办法...使用javascript的工具栏。
Stack Overflow用户
发布于 2012-04-06 23:11:01
对一个div使用z-index (css)：z-index:-1；对于其他z-index:1；
http://www.w3schools.com/cssref/pr_pos_z-index.asp
https://stackoverflow.com/questions/10045374
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号