2

シンプルなヘッダーとボディの php ページがあります。ただし、スクロールすると、コンテンツが「Hi」ヘッダーの後ろに表示されます。

<style type="text/css">
  #header {
    position:fixed;
    z-index:1;
  }
  #body {
    position:relative;
    z-index:2;
  }

</style>

<header> 

<div class="fixed">   
  <h1>  Hi <?php $_POST ["user"] ?>  </h1> 
    <p>Your list: </p>
  <p>&nbsp;</p>
</div>
</header>

<body>

<link href="stylesheet2.css" rel="stylesheet" type="text/css">


  <?php include_once("analyticstracking.php") ?> 

  <?php

echo "<p> You are gluten free<br/>"; //AND THE REST OF THE CONTENT?>

これを修正する方法を知っている人はいますか？私はいくつかのことを試しました。実にシンプルな答えではないかと思います。アイデアをいただければ幸いです。

4

1 に答える 1

4

まず最初に、あなたのマークアップは完全に無効であると言いたいです。headerタグの外側でbodyタグを使用することはできません。そのため、最初に内側にネストしbody、コンテンツの可視性に関する限り、要素にいくつかbackground-colorを割り当てる必要がありますheader。

また、linkタグをタグの間に配置headし、ドキュメント レベルのstyleブロックを選択して、bodyタグの間、またはタグの間に配置しheadます。

答えとは関係ありませんが、おまけとして、ブラウザのサイズを変更すると、position: fixed;要素が水平方向にもスクロールすることがわかります。それを防ぐために、要素をposition: absolute;水平スクロールに設定するjQueryの使用を検討してください。topプロパティ値を変更し続けます。

デモ(クレジット)

于 2013-09-13T08:53:50.837 に答える