Question

我们在网站上制作了固定的头部和菜单。但是菜单有一点点透明度，基本上内容通过我们的菜单。

有没有办法切断它。所以基本上内容就是停在菜单上。当您滚动时，您有一个固定的头部，但内容将无法透视或（在两侧）。

谢谢！网址：http://sea-and-wetest.netserver11.net/

Answer 1

我看到背景图片来自实际标签。

所以，你可以做的是再次添加相同的图像，使用相同的css样式，除了它的高度，它应该等于标题和菜单栏组合的高度，它应该从堆叠上下文的角度来看，在标题和菜单栏下方，但在内容正文上方。

这是在html上播放元素顺序并选择正确的z-indexs的问题。

Answer 2

<!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>

修复了头部和菜单问题

2 个答案: