0

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

有没有办法切断它。所以基本上内容只是停在菜单上。当您滚动时，您有一个固定的头部，但内容不会看穿或（在侧面）。

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

4

2 回答 2

0

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

所以，你可以做的是再次添加相同的图像，除了它的高度之外，它具有相同的 css 样式，它应该等于标题和菜单栏组合的高度，并且它应该从堆叠上下文的角度来看，低于标题和菜单栏，但在内容主体之上。

这是一个玩弄 html 上元素的顺序并选择正确的 z-index 的问题。

于 2012-10-25T14:50:30.670 回答
0 
<!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>
于 2019-05-07T10:31:18.463 回答