0

当サイトではヘッドとメニューを固定しました。ただし、メニューには少し透明性があるため、基本的にコンテンツはメニューを通過します。

それを断ち切る方法はありますか？基本的に、コンテンツはメニューで停止します。スクロールすると頭が固定されますが、コンテンツは透けて見えません（側面にあります）。

ありがとう！URL：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 に答える