我们在网站上制作了固定的头部和菜单。 但是菜单有一点透明度，所以基本上内容都会通过我们的菜单。
有没有办法把它剪掉。所以基本上内容只是停在菜单上。 当您滚动时，您的头部是固定的，但内容不会看穿或（在侧面）。
【问题讨论】：
static 定位，至少在这个项目中。
标签： css menu position fixed head
我看到背景图像来自一个实际的标签。
所以，你可以做的是再次添加相同的图像，除了它的高度之外，具有相同的 css 样式，它应该等于标题和菜单栏组合的高度，并且应该从堆叠上下文的角度来看，在标题和菜单栏下方，但在内容主体上方。
这是一个玩弄 html 上元素的顺序并选择正确的 z-index 的问题。
【讨论】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>head fixed</title>
<style>
#dvHead {position:fixed;left:19px;top:12px;height:24px;background-color:#d8d7c0;color:#888888;border:1px solid #c4bc8b;}
#dvBody {position:fixed;left:20px;top:38px;height:100px;background-color:#dddddd;overflow:auto;}
td {border:1px solid #c4bc8b;}
</style>
<script>
function initpage() {
resize_thead();
}
function resize_thead() {for(var i=0;i<3;i++){document.getElementsByTagName("table")[0].firstElementChild.rows[0].childNodes[i].width=document.getElementsByTagName("table")[1].firstElementChild.rows[0].childNodes[i].clientWidth;}}
</script>
</head>
<body onload="initpage()">
<div id="dvHead">
<table>
<tr><th>TH 1</th><th>TH 2</th><th>TH 3</th></tr>
</table>
</div>
<div id="dvBody">
<table>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
<tr><td>TD 1</td><td>TD 2</td><td>TD 3</td></tr>
</table>
</div>
</body>
</html>
【讨论】：